如何设置 jQuery Select2 的选定值？

Posted 2023-05-07

【中文标题】如何设置 jQuery Select2 的选定值？

【英文标题】：How to set selected value of jQuery Select2?

【发布时间】：2021-08-30 09:43:45

【问题描述】：

这属于 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 programmatic access 不适用于此。

【问题讨论】：

你应该可以只在html中设置选择的值或者使用$("#programid").val()

@ExplosionPills Negative，我也试过了，我得到了一个空白值。我应该如何使用 programid.val()？我从服务器获取了值，然后我需要将它设置到 select2 的这个隐藏字段中。

@ClearBoth 不确定我是否明白你的意思。您是否尝试将 Select2 组件的“选定”值设置为 AJAX 检索结果之一？

@AnPhan 是的，有没有办法做到这一点？

@ClearBoth 有。在下面检查我的答案。

【参考方案1】：

选择2

---

第 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!");

---

如果您使用 select2 而不使用 AJAX，您可以执行以下操作：

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

【讨论】：

trigger('change'); 是重要的部分

$("#mySelect2").select2("val", "0") - 这将触发值更改的 jquery 事件。如何防止这种情况发生。通常当用户提交表单时，完成后，我会重置所有表单数据。重置不会重置 select2。使用 select2("val", "0") 将触发更改，这很疯狂，因为用户没有采取任何行动。

版本 4 select2.org/programmatic-control/add-select-clear-items

为 .trigger('change') 表扬

trigger('change') 部分我怎么强调都不过分。没有它，这个东西甚至不会更新它自己的视觉外观（即显示选定的选项）。

【参考方案2】：

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

$('#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

【讨论】：

我尝试使用 id only select2('val', '1') 但它不起作用.. 谢谢

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

在 v4 上相同。一直在拉我的头发。我认为不使用 javascript 解决方案是不可能的。现在正在寻找另一个 jQuery/Bootstrap Select2 下拉菜单（2 天摆弄每一种可能的方法 - 不开心！）

Select2 v4: $('#inputID').val(100).trigger('change') 见select2.github.io/…

@NoobishPro & An Phan - 感谢您的回答和评论

【参考方案3】：

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

【讨论】：

如何通过文本而不是val来设置

问题是如何在加载 AJAX 调用后执行此操作。这个答案在这种情况下不起作用。

这将触发 select2 值更改，如果您要处理此事件，这将是很奇怪的，并且它在没有用户执行的情况下触发

【参考方案4】：

正如我所尝试的，当在 select2 中使用 ajax 时，在 select2 中设置新值的 programmatic control 方法对我不起作用！ 现在我写这些代码来解决这个问题：

$('#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 进行验收测试完美

乏味，当然，但是，就像每个人都发现 Select2 v4 根本无法做一些像设置默认选择这样简单得可笑的事情

我发现这个答案是使 select2 v4 - ajax 选择的唯一方法。

【参考方案5】：

var $option = $("<option selected></option>").val('1').text("Pick me");

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

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

【讨论】：

var $option = $("").val('1').text("Pick me"); $('#select_id').append($option).trigger('change');

谢谢。确认工作在 4.0.0 版（ajax 调用）

如果您使用带有 ajax 的可搜索框，这是正确的解决方案。这个在 2019 年 6 月为我工作。

【参考方案6】：

我确实喜欢这个-

$("#drpServices").select2().val("0").trigger("change");

【讨论】：

请提供一些解释以帮助用户了解您的代码如何工作并回答 OP 的问题。

@Ivan，我正在这样做 $("#drpServices").val("0"); 这不会在 select2 下拉列表中选择税，以影响值和文本都需要触发 select2 的更改功能。这对我来说非常有效。希望用户能理解。

【参考方案7】：

在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 事件触发我自己的事件处理程序，当用户手动更改值时。

另一种选择是destroy 并再次调用插件.. 查看更新的代码..

有没有办法获得我最初传递给 select2 的选项，这样我就不必复制它们了？无论如何，这个解决方案似乎更像是一个 hack。

当然是哈希。根据文档的官方方式是触发更改事件。 so that I wouldn't have to duplicate them 为什么要复制它们？当您执行destroy 时，select 仍然存在，还有他的所有options。

我的意思是传递给 select2 的选项：$example.select2( ... this ... )

【参考方案8】：

我认为你需要initSelection 函数

$("#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;
    
  ,
  initSelection: function (element, callback) 
    var id = $(element).val();
    if (id !== "") 
      $.ajax("ajax.php/get_where", 
        data: programid: id,
        dataType: "json"
      ).done(function (data) 
        $.each(data, function (i, value) 
          callback("text": value.text, "id": value.id);
        );
        ;
      );
    
  ,
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m)  return m; 
);

【讨论】：

这是有效的。但自 4.0 版起已弃用

【参考方案9】：

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

来源：https://select2.github.io/options.html

【参考方案10】：

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

$('#selectteam').val([183,182]).trigger('change');

【讨论】：

今天也谢谢你

如果您想将多个值设置为选中状态，可以将一组 id 传递给 .val() 这一事实非常有用

【参考方案11】：

$('#inputID').val("100").select2();

在选择当前选择之一之后应用select2会更合适。

【参考方案12】：

在 Select2 V.4

使用$('selector').select2().val(value_to_select).trigger('change');

我觉得应该可以

【参考方案13】：

对于 Ajax，请使用 $(".select2").val("").trigger("change")。这应该可以解决问题。

【参考方案14】：

    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

我用这个简单的代码解决了我的问题。其中#select_location_id 是选择框的ID，value 是select2 框中列出的选项的值。

【参考方案15】：

An Phan 的回答对我有用：

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

但添加更改会触发事件

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

【讨论】：

以这种方式执行此操作时，我收到错误“Uncaught TypeError: $(...).select2(...).change is not a function(...)”。我认为 Select2 的 4.x 版本不可能 - 这里没有任何东西适用于 ajax。

【参考方案16】：

有时，select2() 将首先加载，这使得控件无法正确显示先前选择的值。延迟几秒钟可以解决这个问题。

setTimeout(function()                  
    $('#costcentreid').select2();               
,3000);

【参考方案17】：

您可以使用此代码：

$("#programid").val(["number:2", "number:3"]).trigger("change");

其中 "number:2" 中的 2 和 "number:3" 中的 3 是对象数组中的 id 字段

【参考方案18】：

这对我来说很好：

        initSelection: function (element, callback) 
    var id = $(element).val();
    $.ajax("url/" + id, 
        dataType: "json"
    ).done(function (data) 
        var newOption = new Option(data.title, data.id, true, true);
        $('#select2_id').append(newOption).trigger('change');
        callback("text": data.title, "id": data.id);
    );
,

【参考方案19】：

我在 select2 ajax 下拉菜单中做了类似的事情来预设元素

      //preset element values
        $(id).val(topics);
       //topics is an array of format ["id":"","text":"", .....]
          setTimeout(function()
           ajaxTopicDropdown(id,
                2,location.origin+"/api for gettings topics/",
                "Pick a topic", true, 5);                      
            ,1);
        // ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url

【参考方案20】：

你应该使用：

var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');

// For set multi selected values
var data =  [];//Array Ids
var option =  [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) 
    // append the new option
    $("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');

    // get a list of selected values if any - or create an empty array
    var selectedValues = $("#EventId").val();
    if (selectedValues == null) 
        selectedValues = new Array();
    
    selectedValues.push(response.id);   // add the newly created option to the list of selected items
    $("#EventId").val(selectedValues).trigger('change');   // have select2 do it's thing
);

【参考方案21】：

如果您使用的是输入框，则必须将“multiple”属性设置为“true”。例如，

<script>
    $(document).ready(function () 

        var arr = [ id: 100, text: 'Lorem Ipsum 1' ,
             id: 200, text: 'Lorem Ipsum 2'];

        $('#inputID').select2(
            data: arr,
            width: 200,
            multiple: true
        );
    );
</script>

【参考方案22】：

在select2 < version4 中有一个选项initSelection() 用于远程数据加载，通过它可以像在编辑模式下一样设置输入的初始值。

$("#e6").select2(
    placeholder: "Search for a repository",
    minimumInputLength: 1,
    ajax:  
        // instead of writing the function to execute the request we use Select2's convenient helper
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) 
            return 
                q: term, // search term
            ;
        ,
        results: function (data, page) 
            // 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
            return  results: data.items ;
        ,
        cache: true
    ,
    initSelection: function(element, callback) 
        // the input tag has a value attribute preloaded that points to a preselected repository's id
        // this function resolves that id attribute to an object that select2 can render
        // using its formatResult renderer - that way the repository name is shown preselected
        var id = $(element).val();
        if (id !== "") 
            $.ajax("https://api.github.com/repositories/" + id, 
                dataType: "json"
            ).done(function(data)  callback(data); );
        
    ,
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m)  return m;  // we do not want to escape markup since we are displaying html in results
);

源文档：Select2 - 3.5.3

【参考方案23】：

只是想补充一下可能与我有同样问题的其他人。

我试图设置我动态加载的选项（来自 AJAX）的选定选项，并试图根据某些逻辑将其中一个选项设置为选定。

我的问题来了，因为我没有尝试根据需要匹配值的 ID 设置所选选项，而不是匹配名称的值！

【参考方案24】：

对于像这样的多个值：

$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));

这将转化为类似的东西

$("#HouseIds").select2("val", [35293,49525]);

【参考方案25】：

这可能有助于在加载数据进行编辑时从 AJAX 加载 select2 数据（适用于单选或多选）：

在我的表单/模型加载期间：

  $.ajax(
        type: "POST",
        ...        
        success: function (data) 
          selectCountries(fixedEncodeURI(data.countries));
         

调用 Select2 选择数据：

var countrySelect = $('.select_country');
function selectCountries(countries)
    
        if (countries) 
            $.ajax(
                type: 'GET',
                url: "/regions/getCountries/",
                data: $.param( 'idsSelected': countries , true),

            ).then(function (data) 
                // create the option and append to Select2                     
                $.each(data, function (index, value) 
                    var option = new Option(value.text, value.id, true, true);
                    countrySelect.append(option).trigger('change');
                    console.log(option);
                );
                // manually trigger the `select2:select` event
                countrySelect.trigger(
                    type: 'select2:select',
                    params: 
                        data: data
                    
                );
            );
        
    

如果您可能遇到编码问题，您可以根据需要进行更改：

function fixedEncodeURI(str) 
        return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");

    

【参考方案26】：

建立在@tomloprod 的答案之上。您使用x-editable，并且有一个select2（v4）字段并且有多个项目需要预先选择，这是一个奇怪的机会。您可以使用以下代码：

$("#select2field").on("shown", function(e, editable)
    $(["test1", "test2", "test3", "test4"]).each(function(k, v)
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     );
);

它正在发挥作用：

var data = [

    id: 0,
    text: 'enhancement'
,

    id: 1,
    text: 'bug'
,

    id: 2,
    text: 'duplicate'
,

    id: 3,
    text: 'invalid'
,

    id: 4,
    text: 'wontfix'

];

$("#select2field").editable(
        type: "select2",
        url: './',
        name: 'select2field',
        savenochange: true,
        send: 'always',
        mode: 'inline',
        source: data,
        value: "bug, wontfix",
        tpl: '<select style="width: 201px;">',
        select2: 
            width: '201px',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            data:data
        ,
        success: function(response, newValue) 
            console.log("success")
        ,
        error: function(response, newValue) 
            if (response.status === 500) 
                return 'Service unavailable. Please try later.';
             else 
                return response.responseJSON;
            
        
    );

var preselect= [
    
        id: 1,
        text: 'bug'
    ,
    
    id: 4,
    text: 'wontfix'

];

 $("#select2field").on("shown", function(e, editable)
    $(preselect).each(function(k, v)
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     );
);

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

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<a id="select2field">bug, wontfix</a>

我想即使您不使用 x-editable 也可以。我希望 htis 可以帮助某人。

【参考方案27】：

您可以使用此代码：

    $('#country').select2("val", "Your_value").trigger('change');

输入你想要的值而不是 Your_value

希望它会起作用:)

【参考方案28】：

我在 Laravel 中使用 select2 和 ajax 源。在我的情况下，我从页面收到简单的工作循环选项并将选项添加到 select2..

$filtri->stato = [1,2,...];

$('#stato') 是我的带有服务器端负载的 select2

<script>
    @foreach ($filtri->stato as $item)
       $('#stato').append(new Option("\App\Models\stato::find($item)->nome",$item, false, true));
    @endforeach
</script>

在我的情况下，我可以使用 find 方法调用选项文本，但可以使用 ajax 调用来实现

【参考方案29】：

官方Select2 documentation说：

对于从AJAX 源接收数据的 Select2 控件，使用 .val() 将不起作用。选项将不存在，因为在打开控件和/或用户开始搜索之前不会触发 AJAX 请求。

在页面渲染期间设置select2字段中的值将<option>标签放在<select>标签内：

<select id="input-degree">
    <option value="1">Art</option>
</select>

加载页面后，您会在select2 字段中看到Art。如果我们点击该字段，数据将通过 ajax 从服务器获取并显示其他选项。

【参考方案30】：

在远程来源 (AJAX) Select2 中预选选项 对于从 AJAX 源接收数据的 Select2 控件，使用 .val() 将不起作用。选项将不存在，因为在打开控件和/或用户开始搜索之前不会触发 AJAX 请求。服务器端过滤和分页使这更加复杂 - 无法保证特定项目何时实际加载到 Select2 控件中！

因此，处理此问题的最佳方法是简单地将预选项目添加为新选项。对于远程来源的数据，这可能涉及在您的服务器端应用程序中创建一个新的 API 端点，该端点可以检索单个项目：

$('#mySelect2').select2(
ajax: 
    url: '/api/students'

);
var studentSelect = $('#mySelect2');
$.ajax(
    type: 'GET',
    url: '/api/students/s/' + studentId
).then(function (data) 
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');

// manually trigger the `select2:select` event
studentSelect.trigger(
    type: 'select2:select',
    params: 
        data: data
    
);
);