js 省份城市二级动态联动的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province" onchange="func1(this)"></select>
    <select id="city"></select>
    <script>
        data={"安徽":["马鞍山","合肥","芜湖","铜陵","蚌埠"],"江苏":["南京","苏州","无锡","常州","南通"],"山东":["济南","青岛","即墨","蓬莱","泰州"]};
        var pro=document.getElementById("province");      //找到省份的标签对象
        var cit=document.getElementById("city");          //找到城市的标签对象

        for (var k in data){                              //遍历data数据 k是键 省份名
            var opt=document.createElement("option");       //创建option的标签
            pro.appendChild(opt);                           //添加创建的option标签到省份里
            opt.innerHTML=k;                                 // 把k的键的文本 添加到标签内
            }

        function func1(ev) {
            cit.options.length=0;                           //这里使用了技巧 用options.length=0清空了每次点击后添加的option
            for(var i in data[ev.value] ){                 // this.value是原来省份里的键值 
                var op=document.createElement("option");         //创建option的标签

                cit.appendChild(op);                         //添加创建的option
                op.innerHTML=data[ev.value][i];              // 注意: i不是键内数据的内容 是索引 不能直接=i
            }
        }

    </script>
</body>
</html>
================== 注:这里并没有直接在HTML里写死静态代码,因为如果数据的添加和修改会很麻烦,用JS语句控制只需要修改DATA数据即可==========================

PS: 学习的过程是一点一滴的积累,不是聪明就能成功!
巴特西

js 省份城市二级动态联动的例子

最新文章

热门文章
