select2 标记 selectBox 的预选值

【问题标题】：Preselected value for select2 tag selectBoxselect2 标记 selectBox 的预选值
【发布时间】：2015-03-14 07:16:58
【问题描述】：

在页面加载时，您将如何处理已在其选择框中预选的标签？到目前为止，这是我的代码：

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

【问题讨论】：

做到了！我看到其他人只是把“选定”放在那里的例子，我想我也没有想过在那里放真。谢谢！
看起来您也可以通过编程方式执行此操作：$(".operatingSystems").val(["Windows", "Linux"]).trigger("change");

标签： javascript jquery jquery-select2

【解决方案1】：

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

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

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

您可以通过在元素上设置 selected 属性来使用原生 JavaScript 来做到这一点。

theOption.selected = true;

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

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

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

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

【讨论】：