Question

我的应用程序有多个<select>下拉列表，显示完全相同的选项列表。一旦我从其中一个下拉列表中选择了一个项目，那么它应该从其他下拉列表中删除所选项目。我怎样才能用JavaScript实现这个目标？

Answer 1

您将识别元素的value属性，然后遍历所有select元素，迭代其所有内容以找到具有相同value属性值的内容，最后使用以下命令删除该选项：

option.parentElement.removeChild(option);

或者，您可以使用jQuery：

$(document).on('change','select',function(){
    $(this).addClass('exception');
    $('option[value="' + this.value + '"]:not(.exception *)').remove();
    $(this).removeClass('exception');
});

http://jsfiddle.net/PCvT4/

这完成了同样的事情。我可以预见的问题是，你会在几次选择后用完选项。您可以尝试禁用这些选项，如下所示：

$(document).on('change','select',function(){
    $('option[value="disabled"]').prop('disabled',false);
    $(this).addClass('exception');
    $('option[value="' + this.value + '"]:not(.exception *)').prop('disabled',true);
    $(this).removeClass('exception');
});

http://jsfiddle.net/ZrsC6/

Answer 2

试试这个：

$(document).ready(function() {
    $("select").change(function() {
        var self=this;

        $("select").each(function() {
            if (this===self) {
                return;
            }

            $(this).prop('selectedIndex',0);
        });
    });
});

Working fiddle

Answer 3

<!DOCTYPE html>
<html>
<body>

<form>
<select id="mySelect1" onclick="check(this.value)">
  <option value="2" selected disabled>select option</option>
  <option id="m1" value="0">Cats</option>
  <option id="m2" value="1">Dogs</option>
</select>
</form>

<form>
<select id="mySelect2">
    <option value="2" selected disabled>select option</option>
  <option id="m3">Cats</option>
  <option id="m4">Dogs</option>
</select>
</form>

<form>
<select id="mySelect3">
   <option value="2" selected disabled>select option</option>

  <option id="m5">Cats</option>
  <option id="m6">Dogs</option>
</select>
</form>

<form>
<select id="mySelect4">
   <option value="2" selected disabled>select option</option>

  <option id="m7">Cats</option>
  <option id="m8">Dogs</option>
</select>
</form>

<form>
<select id="mySelect5">
   <option value="2" selected disabled>select option</option>

  <option id="m9">Cats</option>
  <option id="m10">Dogs</option>
</select>
</form>

<p id="demo">hello</p>
<p id="demo2">hello2</p>


<script>
    function check(val){
//        var val=document.getElementById("mySelect1").value;
        console.log(val);
        if(val==0){
            disablecats();
        }
        else if(val==1){
            disabledogs();
        }
    }
function disablecats() {



    document.getElementById("m3").disabled = true;
    document.getElementById("m5").disabled = true;
    document.getElementById("m7").disabled = true;
    document.getElementById("m9").disabled = true;
    document.getElementById("m4").disabled = false;
    document.getElementById("m6").disabled = false;
    document.getElementById("m8").disabled = false;
    document.getElementById("m10").disabled = false;
}

function disabledogs(){

    document.getElementById("m4").disabled = true;
    document.getElementById("m6").disabled = true;
    document.getElementById("m8").disabled = true;
    document.getElementById("m10").disabled = true;
     document.getElementById("m3").disabled = false;
    document.getElementById("m5").disabled = false;
    document.getElementById("m7").disabled = false;
    document.getElementById("m9").disabled = false;
}
</script>

</body>
</html>

具有相同选项的多个下拉菜单：如何从其他下拉菜单中删除当前所选项目的一个下拉列表？

3 个答案: