douwei9973 2016-07-08 10:01
浏览 64
已采纳

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...

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥20 蓝牙耳机怎么查看日志
  • ¥15 R语言 拟时序分析降维图如何减少分支
  • ¥15 Fluent齿轮搅油
  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统