如何校验下拉多选值全部存在于DOM的data-test属性数组中

现有代码的核心问题 #

• 循环逻辑完全颠倒：你当前是遍历data-test拆分出的所有选项，判断每个选项是否在选中值数组中，和你需要的「校验所有选中值是否都在data-test数组中」的逻辑完全相反
• 变量名拼写错误：你定义的变量是$variable，后续读取数据时写的是$varible，拼写错误可能导致属性读取异常
• 事件重复绑定：控制台输出的内容逐次叠加，说明你的这段校验代码被重复执行了，大概率是下拉框的change事件被多次绑定，每次选择都会新增一次执行逻辑，导致多次打印
• 冗余判断：test && test != null是重复判断，可简化写法
• data-test重复值问题：你定义的data-test里有重复的选项（比如Parking、Washer都出现了两次），拆分后数组会有冗余，最好先去重

修正后的实现代码 #

// 提前获取允许的选项列表，做去重处理
const allowedOptions = $('.col-test').data('test').split('|').filter((item, index, arr) => arr.indexOf(item) === index);
const selectedOptions = $('#options').val() || [];
let show = true; // 初始值设为true，默认符合校验规则

// 遍历所有选中项，逐一校验是否在允许列表中
for (const selected of selectedOptions) {
  if (!allowedOptions.includes(selected)) {
    show = false;
    break; // 只要有一个不符合就直接终止循环，无需继续校验
  }
}

// 后续直接使用show变量做业务逻辑判断即可
console.log('校验结果：', show);

重复打印问题修复 #

检查你绑定下拉框change事件的代码，确保校验逻辑只绑定一次，不要放在会重复执行的函数（比如渲染函数、接口回调函数）里。如果是用jQuery绑定事件，可以在绑定前先解绑避免重复：

$('#options').off('change').on('change', function() {
  // 把上面的校验逻辑放在这里
})

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