如何在Selectize插件中通过控制器设置多选项为选中状态

问题描述 #

我正在使用Selectize.js插件，数据是包含id和name字段的对象数组（结构参考截图）。目前组件加载正常，技能选项能正常显示。

我的客户端脚本如下：

//skills 
$scope.$selectSkill = $('#selectSkill').selectize({ 
  valueField: 'id', 
  labelField: 'name', 
  searchField: 'name', 
  placeholder: "Select Skills", 
  options: $scope.data.skills, 
  create: false, 
  sortField: { 
    field: 'name', 
    direction: 'asc' 
  } 
});

对应的HTML代码：

<select id="selectSkill" name="selectSkill" ng-model="selectSkill" multiple required> 
</select>

现在触发某个方法后，我得到了两个ID值：48c9eda9c0a8018b4b6aca082d5d1e41 和 48c9fe9ac0a8018b6a37e4db0d07df09，希望将这两个ID对应的选项设置为选中状态（效果参考截图）。

我尝试了以下代码，但没能实现预期效果：

var $select = $("#selectSkill").selectize(); 
var yourDefaultIds = [slectedSkills.skills]; //(those 2 values) 
selectize.setValue(yourDefaultIds);;

解决方案 #

你的代码里有几个小问题，调整后就能正常工作了：

1. 正确获取Selectize实例：调用$("#selectSkill").selectize()返回的是jQuery对象，要拿到真正的Selectize实例，需要访问DOM元素的.selectize属性。
2. 修正数组格式：[slectedSkills.skills]会把ID数组再嵌套一层，你应该直接使用包含两个ID的数组（如果slectedSkills.skills本身就是这两个ID的数组，直接用它就行）。
3. 多选设置需传第二个参数：对于多选控件，setValue方法需要传入第二个参数true，表示允许设置多个值（也可以用addItem逐个添加，但setValue更适合批量设置）。

修正后的代码如下：

// 获取Selectize实例
var selectizeInstance = $('#selectSkill')[0].selectize;
// 定义要选中的ID数组
var defaultIds = ['48c9eda9c0a8018b4b6aca082d5d1e41', '48c9fe9ac0a8018b6a37e4db0d07df09'];
// 设置选中项，第二个参数true开启多选设置
selectizeInstance.setValue(defaultIds, true);

如果slectedSkills.skills本身就是包含这两个ID的数组（比如['id1', 'id2']），可以简化成：

var defaultIds = slectedSkills.skills;
selectizeInstance.setValue(defaultIds, true);

另外，因为你用的是AngularJS，也可以直接通过ng-model同步选中值——只要把ID数组赋值给$scope.selectSkill，Selectize就会自动同步选中状态（前提是你的Selectize和Angular的集成没问题）：

$scope.selectSkill = ['48c9eda9c0a8018b4b6aca082d5d1e41', '48c9fe9ac0a8018b6a37e4db0d07df09'];

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