求助：带搜索功能的Select插件无法识别动态追加选项

问题描述 #

通过JavaScript动态向select元素追加<option>选项后，tom-select、selectize、chosen这几款带搜索功能的Select插件都无法识别新增的选项。

代码示例 #

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="chooseSomething" id="orderMeal">
        <option value="0">Select</option>
        <option value="1">Combo Meal 1</option>
        <option value="2">Combo Meal 2</option>
        <option value="3">Combo Meal 3</option>
 </select>
 <select id="appendOption">
  <option value="0">Select</option>
 </select>

JavaScript代码

const mealOrder = document.getElementById("orderMeal")

mealOrder.addEventListener('change', function(){
  switch (this.value) {
  
    case "1":
         $("#appendOption").empty();
        $("#appendOption").append(`<option>Hot Dog, Fries and a Soda</option>`+
                          `<option>Burger, Shake and a Smile</option>`+
                          `<option>Sugar, Spice and all things nice</option>`);
      break;
      
    case "2":
       $("#appendOption").empty();
        $("#appendOption").append(`<option>Pizza, Popcorn, Burger</option>`+
                          `<option>Burger, Chicken Wings, Soda</option>`+
                          `<option>Random</option>`);
      break;
      
    case "3":
         $("#appendOption").empty();
         $("#appendOption").append(`<option>Soup. Carbonara, Coke</option>`+
                          `<option>Chocolate Cheese Cake, Coffee</option>`+
                          `<option>Random</option>`);
      break;
       case "0":
         $("#appendOption").empty();
         $("#appendOption").append(`<option>Select</option>`);
         break;
  }
})

解决方案 #

这些插件不会自动监听原生select元素的DOM变化，必须调用各自的API来同步更新选项：

1. Tom Select

• 初始化时保存插件实例：

// 页面加载完成后初始化
const appendSelectInstance = new TomSelect('#appendOption', {
  // 你的配置参数，比如搜索相关设置
});

• 动态更新选项时，使用插件提供的方法替代原生DOM操作：

mealOrder.addEventListener('change', function(){
  switch (this.value) {
    case "1":
      appendSelectInstance.clearOptions(); // 清空现有选项
      appendSelectInstance.addOption([
        { value: '1', text: 'Hot Dog, Fries and a Soda' },
        { value: '2', text: 'Burger, Shake and a Smile' },
        { value: '3', text: 'Sugar, Spice and all things nice' }
      ]);
      appendSelectInstance.refreshOptions(); // 刷新组件
      break;
    // 其他case同理...
    case "0":
      appendSelectInstance.clearOptions();
      appendSelectInstance.addOption([{ value: '0', text: 'Select' }]);
      appendSelectInstance.refreshOptions();
      break;
  }
});

2. Selectize

• 初始化时保存实例：

const appendSelectInstance = $('#appendOption').selectize({
  // 你的配置参数
})[0].selectize;

• 动态更新时：

mealOrder.addEventListener('change', function(){
  switch (this.value) {
    case "1":
      appendSelectInstance.clear(); // 清空选中状态
      appendSelectInstance.clearOptions(); // 清空选项
      appendSelectInstance.addOption([
        { value: '1', text: 'Hot Dog, Fries and a Soda' },
        { value: '2', text: 'Burger, Shake and a Smile' },
        { value: '3', text: 'Sugar, Spice and all things nice' }
      ]);
      appendSelectInstance.refreshOptions();
      appendSelectInstance.setValue('1'); // 可选：设置默认选中项
      break;
    // 其他case同理...
  }
});

3. Chosen

• 初始化插件：

$('#appendOption').chosen({
  // 你的配置参数
});

• 在原生DOM操作追加选项后，触发插件的更新事件：

mealOrder.addEventListener('change', function(){
  switch (this.value) {
    case "1":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Hot Dog, Fries and a Soda</option>`+
                                `<option>Burger, Shake and a Smile</option>`+
                                `<option>Sugar, Spice and all things nice</option>`);
      $("#appendOption").trigger("chosen:updated"); // 关键：通知Chosen更新
      break;
    // 其他case同理，每个append后都要加这行代码
  }
});

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