jQuery如何实现仅将select1中未移动过的选中选项追加到select2

实现方案 #

你可以通过判断option的value是否在目标select中已存在，来避免重复追加，实现逻辑如下：

1. 先修正现有代码的变量名笔误（你前面定义的selectedOps和后面使用的selectedOpts拼写不一致，会导致逻辑报错）
2. 遍历选中的选项，逐个校验目标下拉框中是否已存在同值选项，不存在才执行追加操作

完整代码示例

// 获取select1中所有选中的选项
const selectedOpts = $("#select1 option:selected");

// 遍历每个选中项做去重校验
selectedOpts.each(function() {
  const currentVal = $(this).val();
  // 校验select2中是否已经存在同value的选项
  const isExist = $("#select2 option[value='" + currentVal + "']").length > 0;
  // 仅不存在的选项才追加到select2
  if (!isExist) {
    $("#select2").append($(this).clone());
    // 如果需要移动后删除原select1中的对应选项，可以追加下面这行
    // $(this).remove();
  }
});

特殊场景适配

如果你的业务场景里option允许value重复、靠显示文本区分唯一性，把校验逻辑换成匹配text即可：

const currentText = $(this).text();
const isExist = $("#select2 option:contains('" + currentText + "')").length > 0;

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