jQuery如何查找两个多选下拉框的所有共有选项而非单个选项

实现方案 #

你目前的写法逻辑不成立：find() 方法的作用是查找当前选中元素的后代节点，#select1 和 #select2 是平级的DOM节点，从#select1的option里不可能查找到另一个select下的元素。

可以用jQuery内置的filter() + map() 方法实现批量匹配共有选项，无需手动写循环：

场景1：匹配option的value值找共有项 #

// 先提取select2所有option的value存入数组
const select2Values = $('#select2 option').map(function() {
  return this.value
}).get()

// 筛选select1中value和select2重合的option，返回共有选项的jQuery对象
const commonOptions = $('#select1 option').filter(function() {
  return select2Values.includes(this.value)
})

场景2：匹配option的显示文本找共有项 #

如果需要匹配的是下拉框显示的文本而非value值，把上述代码里的this.value替换为$(this).text()即可。

拿到commonOptions后可以直接对共有选项做后续操作，高亮、删除等逻辑都可以直接链式调用。

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