如何以编程方式设置 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：

第 3 步：设置所需值

<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>

直接设置值

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

以上是如何以编程方式设置 jQuery Select2 中的选定值？的详细内容。更多信息请关注PHP中文网其他相关文章！