Question

我需要在页面上实现3个选择框，其中在一个框中选择的值不应出现在下一个选择框中。我可以用代码对此进行详细解释吗？ JS的新手。如果这也可以通过PHP完成，请告诉我。提前致谢。这里是示例代码..让我知道为什么它不采用JS脚本：

    <html>
    <head>
<title>check</title>
<body>


<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<script>
$('select').change(function() {
    var myOpt = [];
    $("select").each(function () {
        myOpt.push($(this).val());
    });
    $("select").each(function () {
        $(this).find("option").prop('hidden', false);
        var sel = $(this);
        $.each(myOpt, function(key, value) {
            if((value != "") && (value != sel.val())) {
                sel.find("option").filter('[value="' + value +'"]').prop('hidden', true);
            }
        });
    });
});
</script>

</body>
</head>
</html>

Answer 1

希望这个答案能解决您的疑问：

$('select').change(function() {
  var val = $(this).val();

  $("select").not(this).each(function(index, item) {
      $(item).find("option[value='" + val + "']").remove();
  });
});

或者您可以访问jsfiddle链接进行实时演示。

Answer 2

为什么不使用多个选择框？

<select multiple name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

如何使用JavaScript实现三个选择框和句柄选择？

2 个答案: