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>

猜你喜欢

转载自www.cnblogs.com/dbslinux/p/11403424.html
今日推荐