javascript - 下拉选项从其他下拉菜单中删除

Question

我需要根据第一个下拉菜单从第二个下拉菜单中删除一些选项。 我已经尝试了相当多的迭代来完成它，但仍然不起作用。 请提供解决方案 在下面的代码中，我需要从第一个下拉列表中已选择的第二个下拉列表中删除该选项。 我已经尝试过提到的 HTML 和 Javascript 代码

HTML

<form>
        Source:
        <select id = "box1" name="a">
            <option>select</option>
            <option value="Apple">Apple</option>
            <option value="Banana">Banana</option>
            <option value="Carrot">Carrot</option>
        </select>   

        Destination:
        <select id="box2" name="b">
            <option>select</option>
            <option value="Apple">Apple</option>
            <option value="Mango">Mango</option>
            <option value="Dice">Dice</option>
            <option value="Carrot">Carrot</option>
         </select>
    </form>

JAVASCRIPT

    var main = function(){
       $("#box1").change(function(){
       var a = $('#box1 option:selected').val();
       $("#box2 option[value='a']").remove();
       });
    }
    $(document).ready(main);

我尝试输入带引号和不带引号的值作为变量 a，但没有效果。尽管当我将“a”替换为“Apple”等特定值时，代码就可以工作了。

Answer 1

我想这就是你的答案;)

var main = function(){
  $("#box1").change(function(){
    var a = $('#box1 option:selected').val();
    $("#box2 option[value="+a+"]").hide().siblings().show();
  });
}
$(document).ready(main);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="box1" name="b">
  <option>select</option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Dice">Dice</option>
  <option value="Carrot">Carrot</option>
</select>
<select id="box2" name="b">
  <option>select</option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Dice">Dice</option>
  <option value="Carrot">Carrot</option>
</select>