如何基于前一个select的选择修改后一个select的值，适配多词选项场景

解决方案 #

方案一：不修改现有HTML结构，仅调整JS逻辑 #

你不需要修改value属性，也不需要额外加id，只要把取值逻辑从读取下拉框的value改成读取选中选项的文本，再把文本中的空格替换为下划线匹配类名即可，同时适配原下拉框的多选特性，修改后的JS代码如下：

var fruit = $("[name=fruit] option").detach()
$("[name=color]").change(function() {
  // 适配多选场景，获取所有选中项的过滤key
  var filterKeys = $(this).find("option:selected").map(function(){
    return $(this).text().replaceAll(' ', '_')
  }).get()
  $("[name=fruit] option").detach()
  // 匹配所有符合任意一个key的选项
  fruit.filter(function(){
    return filterKeys.some(key => $(this).hasClass(key))
  }).clone().appendTo("[name=fruit]")
}).change()

这个方案适配所有单字、多词的选项场景，完全不触碰你需要保留的value属性，不会影响原有表单提交逻辑。

方案二：使用自定义属性实现（匹配你提到的用额外属性替代value的需求） #

如果你希望更稳妥避免文本修改带来的不可控问题，也可以给color的option加自定义data-filter属性，不推荐用id（id全局唯一容易和页面其他元素冲突），示例如下：
首先修改HTML的color下拉部分，value属性完全保留你原有需要的内容即可：

<select multiple name=color>
<option selected data-filter="green">green</option>
<option data-filter="red">red</option>
<option value="你原有需要保留的value值" data-filter="dark_red">dark red</option>
<option data-filter="yellow">yellow</option>
</select>

对应修改JS逻辑读取data-filter属性即可：

var fruit = $("[name=fruit] option").detach()
$("[name=color]").change(function() {
  var filterKeys = $(this).find("option:selected").map(function(){
    return $(this).data("filter")
  }).get()
  $("[name=fruit] option").detach()
  fruit.filter(function(){
    return filterKeys.some(key => $(this).hasClass(key))
  }).clone().appendTo("[name=fruit]")
}).change()

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