logo标签列表

如何设置 jQuery Select2 的选定值？

javascriptphpjqueryajaxjquery-select2
157

这段代码属于 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编程访问在这里无法正常工作。

你应该能够在HTML中设置所选的值，或者使用$("#programid").val()。 - Explosion Pills
@ExplosionPills 不行，我也试过了，我得到了一个空值。我应该如何使用programid.val()？我从服务器获取了值，然后需要将其设置到select2的隐藏字段中。 - ClearBoth
@ClearBoth 不确定我是否理解你的意思。你是想将Select2组件的"selected"值设置为AJAX检索到的结果之一吗？ - An Phan
@AnPhan 是的，有方法可以做到吗？ - ClearBoth
@ClearBoth 这里有。请查看我下面的答案。 - An Phan
35个回答
210

选择2 < 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;
      }
});

第三步： 设置您所需的值

$("#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');
31
"trigger('change');"是重要部分。 - mihkov
$("#mySelect2").select2("val", "0") - 这将触发值更改的 jquery 事件。如何防止它发生。通常当用户提交表单后，我会重置所有表单数据。但是，重置不会重置 select2。使用 select2（“val”，“0”）将触发更改，这很疯狂，因为没有用户操作。 - jumper rbk
版本 4 https://select2.org/programmatic-control/add-select-clear-items - wattry
2
推荐使用 .trigger('change')。 - JP Dolocanog
我无法强调trigger('change')部分的重要性。如果没有它，该元素甚至无法更新自己的视觉外观（即显示所选选项）。 - CyberDude
在<v4>中也需要使用trigger('change');。 - undefined
89

为了动态设置 Select2 组件的 "selected" 值：

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

第二个参数是一个带有期望值的对象。

更新：

这确实有效，只是想指出在新的select2中，"a_key" 在标准的select2对象中是"text"。因此：{id: 100, text: 'Lorem Ipsum'}

示例：

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

感谢 @NoobishPro

1
我尝试使用仅ID选择器select2('val'，'1')，但它没有起作用。谢谢。 - ClearBoth
6
这是有效的，只想提醒一下，在新的select2中，“a_key”在标准的select2对象中是“text”。所以：{id: 100, text: 'Lorem Ipsum'} - NoobishPro
3
我也遇到了这个问题，使用了v4版本。我一直在苦苦思索，但我认为除非使用JavaScript解决方案，否则不可能实现。现在正在寻找另一个jQuery/Bootstrap Select2的下拉菜单（已经试过各种方法两天了，但是没有成功！）。 - MC9000
50
Select2 v4：$('#inputID').val(100).trigger('change')。请参阅http://select2.github.io/options.html#what-events-does-select2-listen-for。 - Paul
1
V4文档使用https://select2.org/programmatic-control/add-select-clear-items。 - wattry
显示剩余4条评论
30

HTML：

<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');

jsfiddle

3
如何通过文本而非值来进行设定。 - Rizwan Patel
问题是如何在AJAX调用加载后执行此操作。这个答案在这种情况下不起作用。 - MC9000
这将触发select2值的更改，如果您有此事件要处理，并且它在用户未执行操作的情况下被触发，则会出现奇怪的情况。 - jumper rbk
在末尾添加 .trigger("change") - Muhammad Zubair
28

我尝试使用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，你可以使用按钮设置新值。 

$("#btn").click(function() {
  $('#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
});

$("#sel").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">

<select id="sel" multiple="multiple" class="col-xs-5">
</select>

<button id="btn">Set Default</button>

我正在使用不同的displayKey和其他东西（虽然这是个坏主意）- 但这对我的Codeception验收测试非常有帮助。 - MonkeyMonkey
4
确实有些乏味，但像每个人一样，大家发现Select2 v4根本没有办法做这么简单的事情，比如设置默认选择。 - MC9000
1
我发现这个答案是使select2 v4 - ajax select的唯一方法。 - user4318530
26

我是这样做的 - 

$("#drpServices").select2().val("0").trigger("change");
3
请提供一些解释，以帮助用户理解您的代码如何工作并回答原帖的问题。 - Ivan
@Ivan，我之前是这样写的 **$("#drpServices").val("0");**，但这并不能选中select2下拉框中的文本。为了同时影响值和文本，我们需要触发select2的change函数。这对我来说完美地解决了问题。我希望用户也能理解。 - Ashi
1
这是我认为最好的答案。它很简单，可以在接收响应后直接添加到JS Ajax调用中。谢谢。 - Andy Borgmann
14
var $option = $("<option selected></option>").val('1').text("Pick me");

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

尝试使用append，然后选择。在AJAX调用时不会重复选项。

var $option = $("<option selected></option>").val('1').text("选我"); $('#select_id').append($option).trigger('change'); - Jigz
感谢。已确认在4.0.0版本上工作（Ajax调用）。 - khalil
如果您正在使用带有Ajax的可搜索框，则这是正确的解决方案。这个在2019年6月对我起作用了。 - Eric Skiff
11

立即设置值并触发更改事件。

$('#selectteam').val([183,182]).trigger('change');
谢谢你，你救了我的一天。 - Jaydeep purohit
如果您想设置多个值作为选定状态，那么将ID数组传递给.val()是非常有用的。 - kiwichris
10
在当前版本的select2- v4.0.1中，您可以像这样设置值： 

var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

using "trigger(change)"
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

using destroy: 
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

<button class="js-programmatic-set-val">set value</button>

如何在不触发change事件的情况下设置值？change事件会触发我的自定义事件处理程序，这些处理程序是为用户手动更改值而设计的。 - enumag
另一个选项是destroy并重新调用插件。请参见更新的代码。 - Mosh Feu
有没有办法获取我最初传递给select2的选项，这样我就不必重复它们了？无论如何，这个解决方案似乎更像是一个hack。 - enumag
我指的是传递给select2的选项：$example.select2({ ... this ... }) - enumag
是的，这正是我想避免的，因为select2的初始化和我只需要设置一个值的地方在完全不同的上下文中。 - enumag
显示剩余5条评论
10
$('#inputID').val("100").select2();

在选择当前下拉框选项之后再应用select2会更加合适。

8

HTML

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

JS

 $("#lang").select2().val('php').trigger('change.select2');

source: https://select2.github.io/options.html

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接