javascript - select2 标签 selectBox 的预选值

Question

如何在页面加载时在其选择框中预先选择标签？到目前为止，这是我的代码:

HTML:

<select class="selectBox operatingSystems" multiple="multiple">
    <option>Windows</option>
    <option>OSX</option>
    <option>Linux</option>
</select>

JS:

$(".operatingSystems").select2({tags: true, tokenSeparators: [',', ' ']});

我基本上试图让它看起来像 select2 文档页面上的样子，其中预选了“橙色”和“紫色”。来自:https://select2.github.io/examples.html#data-ajax

Answer 1

您可以通过设置 selected 属性来选择现有选项。

<select class="selectBox operatingSystems" multiple="multiple">
    <option>Windows</option>
    <option selected="selected">OSX</option>
    <option>Linux</option>
</select>

将在选择框中预先选择 OSX 选项。这并不特定于 Select2，它是您为选择框(单选和多选)设置预选选项的一般方式。

您可以使用普通 JavaScript 通过设置元素上的 selected 属性来完成此操作。

theOption.selected = true;

或者使用 jQuery 的 .val 方法来设置值。

$("select").val(["OSX"])

为了让 Select2 和其他插件获取值的更改，您可能需要触发 change 事件。

$("select").trigger("change")