jQuery代码从列表中选择三个不同的选项，有三个下拉列表？

问题描述：

I have three distinct dropdown boxes, each one contain a list that is common to that three boxes. My need is to filter the list like,

when user selects an option in the first dropdown, then he goes to next, he shouldn't get the option in the list the is selected earlier in the first dropdown.

This is the image showing two dropdowns, I need three of them.
this is the image for two ddwns, but actully i need three of it.

<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function cleanMonth(ddl) {
            var val = ddl.options[ddl.selectedIndex].value;

        //Clear all items
        $("#ddlMonth2 > option").remove();

        //Add all options from dropdown 1
        $("#" + ddl.id + "> option").each(function () {
            var opt = document.createElement("option");
            opt.text = this.text;
            opt.value = this.value;
            document.getElementById("ddlMonth2").options.add(opt);
        });

        //Remove selected
        $("#ddlMonth2 option[value='" + val + "']").remove();
    }
</script>

答

<html>
<head>
    <title>Dropdown test</title>
</head>
<body>
  <select id="first">
    <option value="0">--Select--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
  </select>
  <select id="second">
    <option value="0">--Select--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
  </select>
  <select id="third">
    <option value="0">--Select--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
  </select>

</body>
    <script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>


<script type="text/javascript">
    $(document).ready(function(){
        $("#first").on('change',function(){
             var selectedItem = $("#first").val();
             $("#second").children("option").show();
             $("#second").children("option[value^=" + selectedItem + "]").hide();
        });
        $("#first ,#second").on('change',function(){
             var selectedItem = $("#first").val();
             var selectedItem2 = $("#second").val();
             $("#third").children("option").show();
             $("#third").children("option[value^=" + selectedItem + "]").hide();
             $("#third").children("option[value^=" + selectedItem2 + "]").hide();
        });
    });
</script>

</html>

This code will work...

jQuery代码从列表中选择三个不同的选项，有三个下拉列表？

相关推荐