码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实现省市选择标签动态二级联动

时间:2020-01-11 16:44:52      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:png   mamicode   内容   修改   rip   doctype   head   city   jin   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
</head>
<body>
<select id="province" onchange="func1()">Province</select>
<select id="city" onchange="func2()">city</select>

<script>
    data={"Jilin":["Changchun","Baicheng"],"Liaoning":["Shengyang","Tieling"],"Heilongjiang":["Haerbin","Mudanjing"]};
    var pro=document.getElementById("province");
    for (var i in data){
        var opt=document.createElement("option");
        opt.innerHTML=i;
        opt.value=i;技术图片
        pro.appendChild(opt);
    }
    function func1(){
        var pro=document.getElementById("province");
        var City=document.getElementById("city");
        var city=pro.value;
        City.options.length=0;
        for (var i in data[city]){
           var city_name=document.createElement("option");
           city_name.innerHTML=data[city][i];
           city_name.value=data[city][i];
           City.appendChild(city_name);
       }
        console.log(city);
    }

    function func2(){
       var pro=document.getElementById("city");
       console.log(pro.value);
    }

</script>
</body>
</html>

初始运行界面如上图,每次点击省名,右侧的市名会变成所选省的市名.可以通过修改字典data的内容,动态实现省市名称的增加或删除或改变.

JavaScript实现省市选择标签动态二级联动

标签:png   mamicode   内容   修改   rip   doctype   head   city   jin   

原文地址:https://www.cnblogs.com/iceberg710815/p/12180200.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!