无法在 Select2 多选 select 框中预先 select 选项

Question

我使用 select2 jQuery 模块来创建多项选择 select 框。我在早期版本 (3.4.5) 中执行此操作并且运行良好。但是在升级到 4.1.0 之前select一个选项不起作用。

我的代码如下所示，

HTML - 部分：

<input type="text" id="accessories" />

JS:

jQuery(document).ready(function() {
   var acceArray2 = [{id:0,text:"textA"},{id:1,text:"textB"},{id:2,text:"textC"}];
        
   jQuery("#accessories").select2({
                        data: acceArray2,
                        multiple: true,
                        placeholder: "",
                        width: 200
                    });
   jQuery("#accessories").val("1");
   jQuery("#accessories").trigger("change");
});

当我在框中单击时，会显示我的选项。我也可以 select 一个或多个选项。但我希望“textB”在我打开页面时应该 selected。这适用于原始 select2 版本，但不适用于 4.1.0。盒子是空的。

我花了几个小时试图找出问题所在，但我不能....

Answer 1

您可以在数组对象中添加 selected 选项，例如：

jQuery(document).ready(function() {
  var acceArray2 = [{
    id: 0,
    text: "textA"
  }, {
    id: 1,
    text: "textB",
    selected: true
  }, {
    id: 2,
    text: "textC",
    selected: true
  }];

  jQuery("#accessories").select2({
    data: acceArray2,
    multiple: true,
    placeholder: "",
    width: 200
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<input type="text" id="accessories" />

Answer 2

或者，您可以将 input 标签更改为 select。它似乎在下面工作：

jQuery(document).ready(function() {
  const acceArray2 = [{
    id: 0,
    text: "textA"
  }, {
    id: 1,
    text: "textB"
  }, {
    id: 2,
    text: "textC"
  }];

  jQuery("#accessories").select2({
    data: acceArray2,
    multiple: true,
    placeholder: "",
    width: 200
  });
  jQuery("#accessories").val("1");
  jQuery("#accessories").trigger("change");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="accessories"></select>

无法在 Select2 多选 select 框中预先 select 选项

Can't pre-select options in Select2 multiple choice select box

javascript

jquery-select2-4