如何以编程方式设置 jQuery Select2 中的选定值？-php教程-PHP中文网

如何以编程方式设置 jQuery Select2 中的选定值？

Susan Sarandon

发布： 2024-10-30 16:58:02

原创

229 人浏览过

How to Programmatically Set the Selected Value in jQuery Select2?

如何设置 jQuery Select2 的选定值？

jQuery Select2 是一个流行的插件，它增强了选择元素的可用性。其有用的功能之一是能够以编程方式设置所选值。这在需要在初始页面加载时或编辑以前保存的选择时显示预定义值的情况下特别有用。

Select2

第 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中文网其他相关文章！