如何实现多选Select标签选中项转列表功能时避免重复添加元素

嘿，这个问题挺常见的！你现在的代码每次点击按钮都会把所有选中的选项直接添加到列表里，完全没做重复校验，所以才会出现同一个元素被多次添加的情况。咱们只需要在创建Li之前，先检查列表里有没有已经存在对应选项的元素就行啦。

核心思路 #

我们可以用选项的value作为唯一判断标识（毕竟value一般是业务上的唯一值，比文本内容更靠谱），给每个生成的Li元素添加一个自定义属性data-value来存储对应Option的value，这样每次添加前就能通过这个属性快速判断是否已经存在相同的元素。

修改后的完整代码 #

$(".btn").on("click", function () {
  let selectedItems = $("#node-input-options option:selected");
  selectedItems.each(function (i, el) {
    let text = $(el).text();
    let val = $(el).val();
    
    // 关键步骤：检查列表中是否已存在对应value的Li元素
    let isDuplicate = list.find(`li[data-value="${val}"]`).length > 0;
    if (!isDuplicate) {
      // 不存在重复项才创建并添加Li
      var li = $("<li>")
        .text(text)
        .attr("data-value", val) // 用自定义data属性存储value，方便后续校验
        .attr("title", val);
      list.append(li);
      
      // 双击删除事件（这里用$(this)比直接用li变量更稳妥，避免闭包变量问题）
      li.on("dblclick", function () {
        $(this).remove();
      });
    }
  });
});

补充说明 #

1. 为什么用data-value而不是依赖title？因为title的作用是提供悬浮提示，用自定义data属性来存储业务标识更语义化，也能避免后续修改title时影响重复校验的逻辑。
2. 如果你的业务场景需要用文本内容判断重复（比如value可能重复但文本唯一），可以把校验逻辑改成这样：

   let isDuplicate = list.find(`li:contains("${text}")`).length > 0;
   

   不过要注意:contains()是包含匹配，如果列表里有包含该文本的其他元素也会被匹配到，这种情况还是建议用唯一标识（比如value）来判断更准确。

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