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

Question

我正在尝试使用“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?

Answer 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>