已初始化Selectize元素添加新选中选项失败，求解决方案

你的问题核心在于：你想要选中的"Fiji"不在Selectize初始化时的选项池中，而setValue()方法只能对已经存在于选项池中的值生效，再加上你设置了create: false，禁止了用户手动创建新选项，所以直接调用setValue("Fiji")自然不会有任何效果。

正确的实现步骤 #

要实现点击按钮添加并选中"Fiji"，需要分两步：

1. 先将"Fiji"添加到Selectize的选项池中（避免重复添加）
2. 再将这个新选项设置为选中状态

修改后的代码示例 #

<select class="form-control pickerSelectClass" id="countries"></select>
<button type="button" onclick="addFiji();">Add "Fiji"</button>
<script>
function addFiji(){
  // 获取Selectize实例（两种方式都可以）
  var selectize = $('#countries').data('selectize');
  if (!selectize) return;

  // 检查"Fiji"是否已经存在于选项池中，避免重复添加
  const fijiExists = selectize.options.some(option => option.name === "Fiji");
  
  if (!fijiExists) {
    // 向选项池添加新选项，需与初始化时的字段结构一致
    selectize.addOption({ name: "Fiji" });
    // 刷新选项列表，确保新选项能被Selectize识别
    selectize.refreshOptions();
  }

  // 多选场景下推荐用addItem()，不会覆盖已选中的其他选项
  selectize.addItem("Fiji");
  // 如果是单选场景，才使用setValue()：selectize.setValue("Fiji");
}

var countries = [{"name":""}, {"name":"Afghanistan"}, {"name":"Belgium"}, {"name":"China"},{"name":"Denmark"}, {"name":"Estonia"}, {"name":"Finland"}, {"name":"Greece"}];
$.ajax({
  url: '/echo/json/',
  type: 'POST',
  dataType: 'json',
  data: { json: JSON.stringify(countries) },
  error: function(err) {
    console.log(err);
  },
  success: function(options) {
    $('#countries').selectize({
      valueField: 'name',
      labelField: 'name',
      searchField: 'name',
      maxItems: 3,
      preload: true,
      options: options,
      create: false,
    });
  }
});
</script>

关键知识点说明 #

• addOption()：用于向Selectize的选项池中添加新的选项对象，必须和初始化时定义的valueField/labelField结构保持一致
• refreshOptions()：添加新选项后调用该方法，确保Selectize更新内部的选项列表，让新选项可以被搜索或选中
• addItem()：多选场景下优先使用，它会将指定值追加到已选中列表中；如果是单选场景，才使用setValue()（会覆盖原有选中项）

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