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

淡淡的烟草味﹌ 2021-09-26 00:42 384阅读 0赞

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