JS实现二级联动

最新推荐文章于 2023-05-28 10:52:10 发布

米兰的小铁匠z

最新推荐文章于 2023-05-28 10:52:10 发布

阅读量447

点赞数

分类专栏：前端文章标签： html5 canvas typescript dom zabbix

原文链接：https://www.cnblogs.com/klvchen/p/10364333.html

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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;
        // 必须清掉每个option属性，否则省份切换的时候地区不会跟切换
        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>

在这里插入图片描述

米兰的小铁匠z

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现二级联动

onchange 事件<body> <select id="province" onchange="func1()"> <option value="shandong">山东</option> <option value="hebei">河北</option> <option value="beijing">北京</option> </se
复制链接

扫一扫