克隆SlimSelect实例异常：值同步且下拉菜单无法打开求排查

你的代码里有三个核心问题导致克隆后的SlimSelect异常：

1. 未真正修改克隆元素的ID #

你这段代码只是把原ID赋值给变量arr然后拼接新字符串，但根本没把新ID设置回select元素上：

const arr = clone.querySelector("[name='ArrLists']").id;
arr += newId; // 这里只是修改了变量，没改元素的id属性！

结果克隆后的select和原元素共用同一个ID，导致DOM冲突，SlimSelect无法正确绑定。

2. SlimSelect初始化选择器缺少#符号 #

初始化时你直接传了ID字符串，但SlimSelect的select参数需要合法的选择器或者DOM元素，不传#的话找不到目标元素：

new SlimSelect({
  select: arr // 应该是 `#${arr}`
});

3. 克隆了已被SlimSelect改造过的DOM #

原表单里的select已经被初始化过SlimSelect，此时DOM结构已经被修改（生成了.slim-select容器），直接克隆整个.clone元素会把这些额外的DOM也复制过来，导致新元素的事件绑定完全混乱，下拉菜单无法触发。

修复后的完整代码 #

HTML部分（无需修改）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link href="https://unpkg.com/slim-select@latest/dist/slimselect.css" rel="stylesheet">

<button id="add-button" class="btn btn-primary mb-3">Add Form</button>
<div class="wrappers">
  <div class="row clone mb-2">
    <div class="col px-0">
      <select id="single" name="ArrLists">
        <option value="" selected disabled>Choose</option>
        <option value="value 1">Value 1</option>
        <option value="value 2">Value 2</option>
        <option value="value 3">Value 3</option>
      </select>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/slim-select@latest/dist/slimselect.min.js"></script>

JS部分（修改关键逻辑）

const btn = document.getElementById("add-button");
const formClone = document.querySelector(".clone");
const parentForm = document.querySelector(".wrappers");

// 先初始化原select，然后把原表单恢复成未被SlimSelect修改的状态，方便克隆
const originalSelect = document.querySelector('#single');
new SlimSelect({
  select: originalSelect
});
formClone.innerHTML = formClone.querySelector('.col').innerHTML;

btn.addEventListener("click", (e) => {
  e.preventDefault();
  const newId = makeid(10);
  const clone = formClone.cloneNode(true);
  const selectEl = clone.querySelector("[name='ArrLists']");
  // 真正修改select的id属性
  selectEl.id = `single-${newId}`;
  
  parentForm.appendChild(clone);

  const deleteForm = document.createElement("button");
  deleteForm.innerText = "X";
  deleteForm.classList.add("btn", "btn-danger", "btn-sm");
  clone.appendChild(deleteForm);
  
  // 直接用DOM元素初始化SlimSelect，避免选择器错误
  new SlimSelect({
    select: selectEl
  });

  deleteForm.addEventListener("click", (e) => {
    e.preventDefault();
    // 移除前销毁SlimSelect实例，避免内存泄漏
    const slimSelectInstance = SlimSelect.get(selectEl);
    if (slimSelectInstance) slimSelectInstance.destroy();
    e.target.parentElement.remove();
  });
});

function makeid(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  let counter = 0;
  while (counter < length) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    counter += 1;
  }
  return result;
}

关键修复点说明 #

1. 初始化原select后，把原表单恢复成仅包含原始select的状态，确保克隆的是干净的select元素。
2. 直接修改克隆后select元素的id属性，而不是修改字符串变量。
3. 用DOM元素直接初始化SlimSelect，避免选择器错误。
4. 移除克隆元素时销毁对应的SlimSelect实例，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Tom-Cat