js省市二级联动实例

Posted dbslinux

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
</body>
<script>
data="河北省":["邯郸","廊坊"],"北京":["海淀","朝阳"],"山东省":["青岛","济南"]
var pro=document.getElementById("province"); //先拿到select的省级对象
var city=document.getElementById("city"); //拿到市级对象
var option_pro=document.createElement("option") //创建标签
option_pro.innerHTML=i; //往标签里添加省份
pro.appendChild(option_pro); //往父标签pro里加option_pro标签

function func1(self) //定义事件函数---目的是拿到被先中的省份,才能对应城市添加到其中
//拿到options数组.数组的索引.拿到标签对象里的文本
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>
</html>

以上是关于js省市二级联动实例的主要内容,如果未能解决你的问题,请参考以下文章

JS实现省市二级联动

JS——省市二级联动

js 省市二级联动

省市二级联动--使用app-jquery-cityselect.js插件

php ajax关于省市联动

jQuery_完成省市二级联动