Selectizejs动态生成Select元素时选中项丢失问题求助

嘿，我之前也踩过这个坑！你遇到的问题大概率是因为每次点击添加按钮时，不小心重新初始化了所有已有的Selectize实例，导致它们的选中状态被直接清空了。或者是克隆元素的时候没处理好，把Selectize生成的DOM结构一起克隆了，反而破坏了原有实例的状态。

下面给你两种解决方案，优先用第一种，简单又高效：

方案一：只初始化新添加的Select元素（推荐） #

核心思路就是：不对已经初始化过的Selectize实例做任何操作，只给新生成的空白Select元素初始化Selectize。这样原有实例的选中状态完全不会被影响。

先看HTML结构：

<!-- 存放所有选择框的容器 -->
<div class="select-group">
  <!-- 初始的选择框 -->
  <select class="custom-select">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
</div>
<button id="add-btn">添加新选择框</button>

然后是jQuery代码：

// 先初始化第一个选择框
$('.custom-select').selectize();

// 绑定添加按钮的点击事件
$('#add-btn').on('click', function() {
  // 提前定义好选择框的模板（用模板字符串最稳妥，避免克隆已被Selectize修改过的DOM）
  const selectTemplate = `
    <select class="custom-select">
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橙子</option>
    </select>
  `;
  
  // 把新的选择框添加到容器里，同时获取这个新元素的jQuery对象
  const newSelect = $(selectTemplate).appendTo('.select-group');
  
  // 只给这个新元素初始化Selectize！重点就在这里！
  newSelect.selectize();

  // 可选：如果想让新选择框默认选中和上一个选择框相同的值，可以加这段代码
  const lastExistingSelect = $('.custom-select').not(newSelect).last()[0];
  if (lastExistingSelect?.selectize) {
    const selectedVal = lastExistingSelect.selectize.getValue();
    newSelect[0].selectize.setValue(selectedVal);
  }
});

为什么这个方法有效？因为Selectize初始化后会给原DOM元素添加一个selectize属性，指向它的实例对象。我们只操作新生成的、还没有这个属性的元素，完全不会触动已经存在的实例，自然就不会清空之前的选中值了。

方案二：保存并恢复选中值（特殊场景用） #

如果你的业务逻辑必须重新初始化所有Selectize实例（比如动态修改了选项列表），那可以先把所有现有实例的选中值保存下来，重新初始化后再恢复：

$('#add-btn').on('click', function() {
  // 第一步：保存所有现有Selectize实例的选中值
  const selectedValues = [];
  $('.custom-select').each(function() {
    if (this.selectize) {
      selectedValues.push(this.selectize.getValue());
    }
  });

  // 添加新的选择框
  const newSelect = $(selectTemplate).appendTo('.select-group');

  // 第二步：销毁所有现有Selectize实例
  $('.custom-select').each(function() {
    if (this.selectize) {
      this.selectize.destroy();
    }
  });

  // 第三步：重新初始化所有选择框
  $('.custom-select').selectize();

  // 第四步：恢复之前保存的选中值
  $('.custom-select').each(function(index) {
    if (selectedValues[index]) {
      this.selectize.setValue(selectedValues[index]);
    }
  });
});

这种方式比较繁琐，一般不推荐，除非你确实有不得不重新初始化所有实例的需求。

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