二级联动
2017-11-27 本文已影响20人
akubaba
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body>
<select id="province" >
<option>--请选择省份--</option>
</select >
<select id="city">
<option>--请选择城市--</option>
</select>
</body>
<script type="text/javascript">
/*
//json 对象
//java 中的 map key:value
//创建json对象
var json = {"name":"tom","age":18};
//拿到json中的所有键
for(var key in json){
//根据键取得对应的值
alert(key+"==>"+json[key]);
}
*/
//1.创建json
var json = {"河北省":["廊坊市","保定市","石家庄"],"山东省":["济南","青岛","烟台"],"河南省":["郑州市","洛阳市","开封"]};
var province = document.getElementById("province");
var city = document.getElementById("city");
//2.遍历json中的所有key
for(var key in json){
//3.key封装到option对象中
var option = document.createElement("option");
option.innerHTML = key;
//4.添加
province.appendChild(option);
}
//5.为province添加onchange事件
province.onchange=function(){
//1.每次添加市之前,清空市的下拉选
city.length=1;
//2.获得用户选择的省
var pronvinceKey = this.options[this.selectedIndex].innerHTML;
//3.根据选择的省去json中取得对应数组
var cities = json[pronvinceKey];
//4.遍历数组中的所有市,封装到option对象中
for(var i = 0 ; i < cities.length ; i++){
var option = document.createElement("option");
option.innerHTML = cities[i];
//5.将option添加到city中
city.appendChild(option);
}
}
</script>
</html>
