码迷,mamicode.com
首页 > Web开发 > 详细

js省市二级联动实例

时间:2019-08-24 10:07:19      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:联动   sel   meta   创建   山东   this   索引   app   script   

//动态创建省市二级联动
<!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省市二级联动实例

标签:联动   sel   meta   创建   山东   this   索引   app   script   

原文地址:https://www.cnblogs.com/dbslinux/p/11403424.html

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