使用jQuery动态移除Select选项失效，请求排查代码问题

嘿，我帮你排查下这段代码的问题哈，主要有两个关键点需要修正：

1. 选择器未正确解析变量 #

你写的$("#to option[value=str]")里，str是一个变量，但你直接把它放在了字符串字面量里——jQuery会把它当作value="str"来匹配选项，自然找不到你选中的那个值对应的选项。

得把变量值插入到选择器字符串中，两种写法都可以：

• 传统字符串拼接：$("#to option[value='" + str + "']")
• ES6模板字符串（更清晰）：$(#to option[value='${str}'])

2. 未恢复之前移除的选项 #

现在的代码还有个隐藏问题：每次切换From的选项，To里对应的选项会被移除，但切换回之前的选项时，已经被删掉的选项不会自动恢复。比如你先选11，To里的11没了；再选22，To里的22也没了，但11不会回来，最后To里只剩33了。

解决办法是先保存To的原始选项集合，每次From变化时，先重置To的选项为原始状态，再移除当前选中的对应选项。

完整修复代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>From</label>
<select id="from">
  <option value="Onety One">11</option>
  <option value="Twenty Two">22</option>
  <option value="Thirty Three">33</option>
</select>
<label>To</label>
<select id="to">
  <option value="Onety One">11</option>
  <option value="Twenty Two">22</option>
  <option value="Thirty Three">33</option>
</select>

<script>
$(document).ready(function() {
  // 提前保存To的原始选项集合，避免每次重新加载
  const originalToOptions = $("#to").html();
  
  $("#from").change(function() {
    const selectedValue = $(this).val();
    // 重置To的选项为初始状态
    $("#to").html(originalToOptions);
    // 移除当前选中值对应的选项
    $("#to option[value='" + selectedValue + "']").remove();
  });
});
</script>

小优化建议 #

• 把$(this)存成变量，避免重复DOM查询（虽然这里元素少影响不大，但养成好习惯）；
• 优先用value匹配选项，比用文本内容匹配更准确，避免文本重复或特殊字符的干扰。

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