如何实现select1 onChange时筛选select2含指定值的双值选项？

没问题，这个需求只需要调整一下选项的过滤规则就能实现啦～

核心思路 #

原来的代码是精确匹配option的value等于select1的选中值，但现在select2的value是逗号分隔的双值，我们需要检查这个逗号分割后的数组中是否包含select1的选中值，而不是简单的字符串匹配（避免出现把value="12,3"误判为包含"1"的情况）。

完整代码实现 #

首先要在页面初始化时缓存select2的所有原始选项（避免每次过滤都重新从DOM读取，同时防止原始选项丢失），然后修改change事件的过滤逻辑：

// 页面加载完成后，缓存select2的所有原始选项到select1的data中
$(document).ready(function() {
  $("#select1").data('options', $('#select2 option').clone());
});

// select1的change事件处理
$("#select1").change(function() {
  var selectedId = $(this).val();
  // 取出缓存的所有选项
  var allOptions = $(this).data('options');
  
  // 自定义过滤逻辑：检查option的value分割后是否包含选中的id
  var filteredOptions = allOptions.filter(function() {
    // 按逗号分割value为数组，检查是否存在选中的id
    return $(this).val().split(',').indexOf(selectedId) !== -1;
  });
  
  // 更新select2的选项
  $('#select2').html(filteredOptions);
});

额外优化（处理带空格的value） #

如果select2的value可能包含空格（比如value="2, 24"这种格式），可以把split的规则改成忽略逗号后的空格：

return $(this).val().split(/,\s*/).indexOf(selectedId) !== -1;

这样就不会因为空格导致匹配失败啦～

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