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

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

报告相同问题？

悬赏问题

  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler