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

Posted 2021-03-16 Iceberg_710815

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现省市选择标签动态二级联动相关的知识，希望对你有一定的参考价值。

<!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实现省市选择标签动态二级联动的主要内容，如果未能解决你的问题，请参考以下文章