1

我的应用程序有多个<select>下拉菜单，显示完全相同的选项列表。一旦我从其中一个下拉列表中选择了一个项目，它应该从其他下拉列表中删除所选项目。如何使用 JavaScript 实现这一点？

4

3 回答 3

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/

于 2012-11-02T13:44:52.960 回答
0

尝试这个：

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

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

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

工作小提琴

于 2012-11-02T13:47:18.960 回答
0 
<!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>
于 2018-06-17T10:21:53.293 回答