Selectize.js多选组件如何获取选中选项的值？

问题原因 #

1. HTML中multiple="multiple"属性错误加在了外层<div>上，而非<select>标签本身，导致原生select未启用多选模式，Selectize默认按单选逻辑处理。
2. 直接使用jQuery的val()方法无法可靠获取选中值——Selectize会隐藏原生select、独立渲染UI组件，原生select的状态不会实时同步到Selectize的选中状态。

修复步骤 #

1. 修正HTML结构 #

将multiple属性移到<select>标签上：

<div class="selectBox1">
  <select id="period" multiple="multiple">
    <option value="day">Day</option>
    <option value="week">Week</option>
    <option value="month">Month</option>
    <option value="year">Year</option>
  </select>
</div>

2. 正确初始化Selectize #

显式配置maxItems: null确保开启多选（不限制选中数量），也可依赖select的multiple属性自动开启：

$(document).ready(function($){
  $('#period').selectize({
    sortField: "text",
    placeholder: "Select a Period..",
    maxItems: null // 开启无限制多选模式
  });
});

3. 通过Selectize实例获取选中值 #

先获取Selectize实例，再调用其内置方法获取值：

// 获取Selectize实例
var periodSelectInstance = $('#period')[0].selectize;
// 获取选中值数组
var selectedValues = periodSelectInstance.getValue();
// 也可使用getValues()方法，效果一致
// var selectedValues = periodSelectInstance.getValues();

console.log(selectedValues); // 输出选中的value数组，例如["day", "week"]

内容的提问来源于stack exchange，提问作者dave