douwei9973
2016-07-08 10:01
浏览 63

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongmubi4375 2016-07-08 10:29
    已采纳
    <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...

    点赞 打赏 评论

相关推荐 更多相似问题