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

淡淡的烟草味﹌ 2021-09-26 00:42 513阅读 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>

``

发表评论取消回复

表情：

评论列表（有 0 条评论，513人围观）

还没有评论，来说两句吧...

相关阅读

相关 Foundation 下拉菜单

Foundation 下拉菜单 Foundation 下拉菜单允许用户从预定义的下拉列表中选取一个值：实例 Dropdown Button Link 1

蔚落/ 2023年10月08日 19:36/ 0 赞/ 55 阅读

相关 Bootstrap下拉菜单

dropdown 类用来指定一个下拉菜单；使用一个按钮或链接来打开下拉菜单，按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“drop

亦凉/ 2023年09月24日 16:57/ 0 赞/ 111 阅读

相关下拉菜单

![在这里插入图片描述][20200614163018558.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

ゝ一世哀愁。/ 2023年02月17日 14:30/ 0 赞/ 253 阅读

相关 Bootstrap教程(19)--下拉菜单、按钮式下拉菜单

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 下拉菜单 2.1 普通下拉菜单 2.

Bertha 。/ 2022年11月03日 11:28/ 0 赞/ 127 阅读

相关下拉菜单

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

港控/mmm°/ 2022年06月18日 10:51/ 0 赞/ 375 阅读

相关 bootstrap下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

亦凉/ 2022年01月14日 14:01/ 0 赞/ 389 阅读

相关 css 下拉菜单

<style type="text/css"> \ \{ margin: 0px; padding:

迈不过友情╰/ 2021年09月30日 00:44/ 0 赞/ 503 阅读

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

`` <body> <form id="form1" runat="server" method="post"> <!--省份下拉菜单

淡淡的烟草味﹌/ 2021年09月26日 00:42/ 0 赞/ 514 阅读

相关 css下拉菜单

基本下拉菜单当鼠标移动到指定元素上时，会出现下拉菜单。 .dropdown \{ position: relative; display:

Love The Way You Lie/ 2021年09月15日 06:24/ 0 赞/ 513 阅读

相关重构-下拉菜单

动画: 点击标题伸缩点击菜单项伸缩实现: 子元素未知高度过渡:通过js获取子元素高度后,再将其隐藏,后续就可通过获

向右看齐/ 2021年07月24日 20:18/ 0 赞/ 569 阅读