zoukankan      html  css  js  c++  java
  • js 实现二级联动

    onchange 事件

    <body>
        <select id="province" onchange="func1()">
            <option value="shandong">山东</option>
            <option value="hebei">河北</option>
            <option value="beijing">北京</option>
        </select>
    
    </body>
    <script>
        function func1(){
            var pro = document.getElementById("province");
            console.log(pro.value)
        }
    </script>
    
    

    使用字典方式添加数据

    一级数据显示

    <body>
        <select id="province" >
        </select>
    
    </body>
    <script>
        data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
        var pro = document.getElementById("province");
        for (var i in data){
            var option_pro = document.createElement("option");
            option_pro.innerHTML=i;
            pro.appendChild(option_pro);
        }
    </script>
    
    

    二级数据联动 方式一

    <body>
        <select id="province" onchange="func1(this)" >
        </select>
        <select id="city"></select>
    </body>
    <script>
        data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
        var pro  = document.getElementById("province");
        var city = document.getElementById("city");
    
        for (var i in data){
            var option_pro = document.createElement("option");
            option_pro.innerHTML=i;
            pro.appendChild(option_pro);
        }
    
        function func1(self){
            //console.log((self.options[self.selectedIndex]).innerHTML);
            var choice = (self.options[self.selectedIndex]).innerHTML;
    
            var options = city.children;
            for (var k=0; k<options.length; k++){
                city.removeChild(options[k--]);
            }
    
            for (var i in data[choice]){
                var option_city = document.createElement("option");
                option_city.innerHTML = data[choice][i];
                city.appendChild(option_city);
            }
        }
    </script>
    

    二级数据联动 方式二

    <body>
        <select id="province" onchange="func1(this)" >
        </select>
        <select id="city"></select>
    </body>
    <script>
        data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};
        var pro  = document.getElementById("province");
        var city = document.getElementById("city");
    
    
        for (var i in data){
            var option_pro = document.createElement("option");
            option_pro.innerHTML=i;
            pro.appendChild(option_pro);
        }
    
    
    
        function func1(self){
            //console.log((self.options[self.selectedIndex]).innerHTML);
            var choice = (self.options[self.selectedIndex]).innerHTML;
    
            city.options.length=0;
    
            for (var i in data[choice]){
                var option_city = document.createElement("option");
                option_city.innerHTML = data[choice][i];
                city.appendChild(option_city);
            }
        }
    </script>
    
  • 相关阅读:
    ⑥nginx location
    ③nginx 多虚拟主机配置
    ①nginx 安装简介
    11.ansible 角色
    10.ansible 标签功能 触发功能 忽略远程主机采集
    9.ansible 循环功能和忽略错误
    8.ansible 判断功能
    7.ansible在剧本中注册信息
    6.ansible变量
    5.ansible 剧本编写规范
  • 原文地址:https://www.cnblogs.com/klvchen/p/10364333.html
Copyright © 2011-2022 走看看