在 select2 下拉列表中预先填充选定的选项

【问题标题】：Pre populate selected options in select2 dropdown在 select2 下拉列表中预先填充选定的选项
【发布时间】：2018-05-12 05:21:09
【问题描述】：

我正在尝试使用“val”预填充选定的选项，但我只得到一个选项中预选的选项。 JSFiddle code

<select name="question_tags[]" id="question_tags" class="select2_tags" multiple="multiple">

$(document).ready(function() {
            $('.select2_tags').select2({
                placeholder:"Select",
                data : ["Data Structure", "DBMS", "OS"]

            }).select2('val', ["OS", "DBMS"]);
        });

我正在使用 select2 v4.06

我对其进行了探索，发现了为以前版本的 select2 实现的功能，现在在最近的版本中已弃用 Existing solutions JSFiddle

链接中的解决方案不适用于当前版本的 select2， How to pre-select values in select2 multi select?

【问题讨论】：

标签： jquery jquery-select2

【解决方案1】：

首先您需要使用multiple:true 选项使其成为多选，然后您需要使用SelectElement.val([1,2,3]) 和SelectElement.trigger('change') 来通知任何JS 组件该值已更改。 Docs参考

请看下面的演示

$(document).ready(function() {
  var select2 = $('.select2_tags').select2({
    placeholder: "Select",
    width: '500px',
    data: ["Data Structure", "DBMS", "OS"],
    multiple: true,
  })
  select2.val(["DBMS", "OS"]);
  select2.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.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<select name="question_tags[]" id="question_tags" class="select2_tags" multiple="multiple">
</select>

【讨论】：