How to Pre-Select a Value in Select2: A Guide for Versions 4 and Below?

How to Select a Value in Select2?

Select2 is a jQuery plugin that provides a customizable select box widget. In this article, we'll explore how to set a pre-selected value in Select2.

Select2 < Version 4

1. HTML: First, define the Select2 input field as a hidden field with an ID:

<code class="html">&lt;input type=&quot;hidden&quot; name=&quot;programid&quot; id=&quot;programid&quot; class=&quot;width-500&quot;&gt;<ol start="2">
<li>
<strong>Initialize Select2:</strong> Create an instance of Select2 and configure it with the necessary options, including an AJAX call for retrieving data.</li>
<li>
<strong>Set Pre-Selected Value:</strong> Use the select2('data', { id: "selectedID", text: "selectedText" }) method to set the selected value.</li>
</ol>
<h3 id="Select-Version-and-above">Select2 Version 4 and above</h3>
</h3>
<p>For Select2 v4 and above, the approach differs slightly:</p>
<ol><li>
<strong>HTML:</strong> Define the Select2 input field as a standard select element with options and a selected attribute:</li></ol>
<pre class="brush:php;toolbar:false"><code class="html">&lt;select id=&quot;mySelect2&quot; name=&quot;mySelect2[]&quot;&gt;
  &lt;option value=&quot;TheID&quot; selected=&quot;selected&quot;&gt;The text&lt;/option&gt;
&lt;/select&gt;</code>

2. Append Options: To set a value after initialization, you can append pre-selected options to the Select2 field:

<code class="javascript">var $newOption = $("&lt;option selected='selected'&gt;&lt;/option&gt;").val("TheID").text("The text");
$("#mySelect2").append($newOption).trigger('change');</code>

3. Use the val() Method: Alternatively, you can use the val() method followed by .trigger('change') to set a value:

<code class="javascript">$("#mySelect2").val(5).trigger('change');</code>

These methods provide a straightforward way to set a pre-selected value in Select2, regardless of the version you're using.

The above is the detailed content of How to Pre-Select a Value in Select2: A Guide for Versions 4 and Below?. For more information, please follow other related articles on the PHP Chinese website!