如何以程式設計方式設定 jQuery Select2 中的選取值？

如何設定 jQuery Select2 的選取值？

jQuery Select2 是一個受歡迎的插件，它增強了選擇元素的可用性。其有用的功能之一是能夠以程式設計方式設定所選值。這在需要在初始頁面載入時或編輯先前儲存的選擇時顯示預定義值的情況下特別有用。

Select2

Select2

V4

第1 步：HTML 標記

<code class="html"><input type="hidden" name="mySelect2" id="mySelect2"></code>

包含一個隱藏的輸入欄位來保存所選值：

第2 步：建立Select2 實例

<code class="js">$("#mySelect2").select2({
  placeholder: "My Select 2",
  multiple: false,
  minimumInputLength: 1,
  ajax: {
    url: "/elements/all",
    dataType: 'json',
    quietMillis: 250,
    data: function(term, page) {
      return {
        q: term,
      };
    },
    results: function(data, page) {
      return { results: data };
    },
    cache: true
  },
  formatResult: function(element){
    return element.text + ' (' + element.id + ')';
  },
  formatSelection: function(element){
    return element.text + ' (' + element.id + ')';
  },
  escapeMarkup: function(m) {
    return m;
  }
});</code>

使用適當的選項初始化Select2：

第33步驟：設定所需值

<code class="js">$("#mySelect2").select2('data', { id: "elementID", text: "Hello!"  });</code>

使用data() 方法設定選取值：

Select2 V4

使用HTML

<code class="html"><select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
    <option value="TheID" selected="selected">The text</option>
</select></code>

對於Select2 v4，可以直接附加選擇元素的選取選項：

使用jQuery

<code class="js">var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text");
$("#myMultipleSelect2").append($newOption).trigger('change');</code>

使用jQuery

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

直接🎜>直接🎜>直接設定值

以上是如何以程式設計方式設定 jQuery Select2 中的選取值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！