【下拉菜单】随前一个下拉菜单内容变化而变化的下拉菜单

最新推荐文章于 2022-10-12 16:52:08 发布

GODOG_Yang

最新推荐文章于 2022-10-12 16:52:08 发布

阅读量2.4k

点赞数 1

文章标签：下拉菜单

<body>
    <form id="form1" runat="server" method="post">
    <!--省份下拉菜单 -->
    <select id="main">
    </select>
    <!--城市下拉菜单-->
    <select id="sub">
    </select>
 
    <script type="text/javascript">
 
        var data = [
        {
            p: "省1",
            c: ["市a", "市b"]
        },
        {
            p: "省2",
            c: ["市c", "市d", "市e"]
        }
        ]
 
        var main = document.getElementById("main");
        var sub = document.getElementById("sub");
 
        for (var i = 0; i < data.length; i++) {
            var opt = document.createElement("option");
            opt.value = i;
            opt.innerText = data[i].p;
            main.options.add(opt);
        }
 
        main.onchange = MainChange;
 
        function MainChange() {
            var index = parseInt(main[main.selectedIndex].value);
            var c = data[index].c;
            console.log(c);
            sub.options.length = 0;
            for (var i = 0; i < c.length; i++) {
                console.log(i);
                var opt = document.createElement("option");
                opt.value = i;
                opt.innerText = c[i];
                console.log(opt);
                sub.options.add(opt);
            }
        }
 
        main.selectedIndex = 0;
        MainChange();
     
    </script>
 
    </form>
</body>