如何设置 jQuery Select2 的选定值？

IT技术 javascript php jquery ajax jquery-select2
2021-01-14 08:21:30

这属于 Select2 版本 4 之前的代码

我有一个select2从 AJAX 获取数据的简单代码。

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

此代码正在运行，但是，我需要在其上设置一个值，就像在编辑模式下一样。当用户第一次选择一个值时，它将被保存，当他需要编辑该值时，它必须出现在同一个选择菜单 ( select2) 中以选择先前选择的值，但我找不到方法。

更新：

HTML代码：

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">

Select2 编程访问不适用于此。

6个回答

SELECT2 < V4

第 1 步：HTML

<input name="mySelect2" type="hidden" id="mySelect2">

第 2 步：创建 Select2 的实例

$("#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;
      }
});

第 3 步：设置所需的值

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});

如果您在没有 AJAX 的情况下使用select2，您可以执行以下操作：

<select name="mySelect2" id="mySelect2">
  <option value="0">One</option>
  <option value="1">Two</option>
  <option value="2">Three</option>
</select>

/* "One" will be the selected option */
$('[name=mySelect2]').val("0");

你也可以这样做：

$("#mySelect2").select2("val", "0");

SELECT2 V4

对于select2 v4，您可以直接附加一个选项，如下所示：

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

或者使用 JQuery：

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

另一个例子

$("#myMultipleSelect2").val(5).trigger('change');
触发器（'改变'）；是重要的部分
2021-03-16 08:21:30
$("#mySelect2").select2("val", "0") - 这将触发值更改的 jquery 事件。如何防止这种情况发生。通常当用户提交表单时，完成后，我会重置所有表单数据。重置不会重置 select2。使用 select2("val", "0") 将触发更改，这很疯狂，因为用户没有任何操作。
2021-03-29 08:21:30
推荐 .trigger('change')
2021-03-29 08:21:30
2021-04-07 08:21:30
我怎么强调这trigger('change')部分都不为过。如果没有它，这个东西甚至不会更新它自己的视觉外观（即显示选定的选项）。
2021-04-12 08:21:30

动态设置 Select2 组件的“选定”值：

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

其中第二个参数是具有预期值的对象。

更新：

这确实有效，只是想注意在新的 select2 中，“a_key”是标准 select2 对象中的“文本”。所以：{id: 100, text: 'Lorem Ipsum'}

例子： 

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

感谢@NoobishPro

我只尝试使用 id select2('val', '1') 但它不起作用..谢谢
2021-03-15 08:21:30
Select2 v4：$('#inputID').val(100).trigger('change') 见select2.github.io/...
2021-03-28 08:21:30
这确实有效，只是想注意在新的 select2 中，“a_key”是标准 select2 对象中的“文本”。所以：{id：100，文本：'Lorem Ipsum'}
2021-04-02 08:21:30
@NoobishPro 和 An Phan - 感谢您的回答和评论
2021-04-04 08:21:30
在 v4 上也一样。一直在拉我的头发。我认为不使用 JavaScript 解决方案是不可能的。现在正在寻找另一个 jQuery/Bootstrap Select2 下拉列表（2 天摆弄各种可能的方法 - 没有乐趣！）
2021-04-11 08:21:30

网址：

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

JavaScript：

$("#lang").select2().select2('val','asp');

提琴手

如何通过文本而不是 val 设置
2021-04-04 08:21:30
问题是在加载 AJAX 调用后如何执行此操作。这个答案在这种情况下不起作用。
2021-04-11 08:21:30
这将触发 select2 值更改，如果您要处理此事件，这将很奇怪，并且它在没有用户执行的情况下触发
2021-04-12 08:21:30

同样正如我所尝试的那样，当在 select2 中使用 ajax 时，在 select2中设置新值的编程控制方法对我不起作用！现在我编写这些代码来解决问题：

$('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
        .val("20") //set value for option to post it
        .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2

您可以在此链接中测试完整的示例代码：https : //jsfiddle.net/NabiKAZ/2g1qq26v/32/
在此示例代码中，有一个 ajax select2，您可以使用按钮设置新值。

Show code snippet

我发现这个答案是使 select2 v4 - ajax select 的唯一方法。
2021-03-28 08:21:30
乏味，当然，但是，就像每个人都发现 Select2 v4 根本无法做一些像设置默认选择这样简单可笑的事情
2021-04-04 08:21:30
我正在使用不同的 displayKey 和其他东西（虽然这是个坏主意）-这对我使用 Codeception 进行的验收测试非常有用
2021-04-08 08:21:30 
var $option = $("<option selected></option>").val('1').text("Pick me");

$('#select_id').append($option).trigger('change');

试试这个附加然后选择。在 AJAX 调用时不复制选项。

谢谢。确认在 4.0.0 版上工作（ajax 调用）
2021-03-18 08:21:30
如果您使用带有 ajax 的可搜索框，这是正确的解决方案。这个在 2019 年 6 月对我有用。
2021-03-30 08:21:30
var $option = $("<option selected></option>").val('1').text("选择我"); $('#select_id').append($option).trigger('change');
2021-04-12 08:21:30
其它你可能感兴趣的问题
上一篇取决于所选文本的动态扩展上下文菜单 下一篇AngularJS：将服务注入 HTTP 拦截器（循环依赖）