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文档页面上那样，它们有＆＃34; orange＆＃34;和＆＃34;紫色＆＃34;预选。来自：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特有的，它是如何为选择框（单选和多选）设置预选选项。

您可以使用vanilla JavaScript通过在元素上设置selected属性来执行此操作。

theOption.selected = true;

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

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

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

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