Selectize.js动态生成下拉菜单时出现重复菜单问题

问题根源 #

你遇到的核心问题是：直接克隆已经被Selectize初始化过的DOM元素会导致结构混乱——Selectize会把原生<select>替换成它自己生成的复杂DOM结构，克隆这个结构后再调用初始化，会重复生成Selectize实例，进而出现重复菜单且只有一个可用的情况；而跳过初始化的话，克隆的只是原生select，自然没有Selectize的交互功能。

解决方案：用干净模板克隆+仅初始化新元素 #

不要克隆已经初始化过的菜单，而是提前准备一个未初始化的隐藏模板，每次新增时克隆这个干净的模板，再单独对新克隆的元素初始化，同时给每个菜单绑定专属配置。

具体实现步骤

1. 准备隐藏模板
   先写一个不会被初始化的原生select模板，用CSS隐藏：

   <!-- 隐藏的原始模板，不要对它调用selectize初始化 -->
   <div class="select-template" style="display: none;">
     <select class="dynamic-select"></select>
     <button class="remove-btn">移除</button>
   </div>
   
   <!-- 存放动态菜单的容器 -->
   <div id="select-container"></div>
   <button id="add-select-btn">+ 添加下拉菜单</button>
   

2. 编写初始化逻辑
   封装一个只针对单个元素的初始化函数，支持传入专属配置：

   // 示例基础选项，可根据需求调整
   const baseOptions = [
     { value: 'a', text: '通用选项A' },
     { value: 'b', text: '通用选项B' }
   ];
   
   // 初始化单个Selectize实例，接收元素和专属配置
   function initSingleSelectize(el, customConfig) {
     $(el).selectize({
       options: customConfig.options,
       // 这里放每个菜单的专属配置，比如render、onChange等
       onChange: function(value) {
         console.log(`当前菜单(${customConfig.id})选择了：${value}`);
       }
     });
   }
   

3. 绑定添加/移除事件
   点击加号时克隆干净模板，生成专属配置后初始化新元素：

   $('#add-select-btn').click(function() {
     // 克隆干净的模板并显示
     const newSelectWrap = $('.select-template').clone().removeClass('select-template').show();
     const newSelect = newSelectWrap.find('.dynamic-select');
   
     // 生成当前菜单的专属配置（示例：基于索引生成专属选项）
     const menuIndex = $('#select-container .select-template').length + 1;
     const customOptions = [
       ...baseOptions,
       { value: `custom-${menuIndex}`, text: `菜单${menuIndex}专属选项` }
     ];
   
     // 仅初始化新添加的这个select元素
     initSingleSelectize(newSelect, {
       id: menuIndex,
       options: customOptions
     });
   
     // 把新菜单添加到容器
     $('#select-container').append(newSelectWrap);
   
     // 绑定移除按钮事件：先销毁实例再移除DOM
     newSelectWrap.find('.remove-btn').click(function() {
       // 获取当前select的Selectize实例并销毁
       newSelect[0].selectize.destroy();
       // 移除整个菜单容器
       newSelectWrap.remove();
     });
   });
   

关键注意点 #

• 绝对不要克隆已经被Selectize处理过的DOM元素，必须用原生未初始化的模板
• 初始化时只针对新添加的单个元素，不要用全局选择器（比如$('.dynamic-select').selectize()）批量初始化，否则会重复处理已有的实例
• 移除菜单时一定要先调用selectize.destroy()销毁实例，避免内存泄漏和残留DOM

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