无法在 Select2 多选选择框中预选选项答案

【问题标题】：Can't pre-select options in Select2 multiple choice select box无法在 Select2 多选选择框中预选选项
【发布时间】：2022-01-11 23:13:23
【问题描述】：

我使用 select2 jQuery 模块来创建一个多选选择框。我在早期版本（3.4.5）中做到了这一点，效果很好。但是升级到 4.1.0 后预选的一个选项不起作用。

我的代码如下所示，

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");
});

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

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

【问题讨论】：

标签： javascript jquery-select2-4

【解决方案1】：

或者，您可以将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>

【讨论】：

很好，但您必须将“/>”替换为正确的“”。否则页面的其余部分就乱了。你不会注意到这个运行代码 sn-p，因为页面上没有其他 html 代码。
@ubee，感谢您的关注。我完全同意你的看法，因此用正确的标签结束更新了答案。

【解决方案2】：

您可以在数组对象中添加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" />

【讨论】：