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

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

<code class="html"><input type="hidden" name="programid" id="programid" class="width-500"></code>

2. Initialize Select2: Create an instance of Select2 and configure it with the necessary options, including an AJAX call for retrieving data.
3. Set Pre-Selected Value: Use the select2('data', { id: "selectedID", text: "selectedText" }) method to set the selected value.

Select2 Version 4 and above

For Select2 v4 and above, the approach differs slightly:

1. HTML: Define the Select2 input field as a standard select element with options and a selected attribute:

<code class="html"><select id="mySelect2" name="mySelect2[]">
  <option value="TheID" selected>The text</option>                                                                   
</select></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 = $("<option selected></option>").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!