效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二級(jí)聯(lián)動(dòng)</title>
</head>
<body>
<select id="province" >
<option>--請(qǐng)選擇省份--</option>
</select >
<select id="city">
<option>--請(qǐng)選擇城市--</option>
</select>
</body>
<script type="text/javascript">
/*
//json 對(duì)象
//java 中的 map key:value
//創(chuàng)建json對(duì)象
var json = {"name":"tom","age":18};
//拿到j(luò)son中的所有鍵
for(var key in json){
//根據(jù)鍵取得對(duì)應(yīng)的值
alert(key+"==>"+json[key]);
}
*/
//1.創(chuàng)建json
var json = {"河北省":["廊坊市","保定市","石家莊"],"山東省":["濟(jì)南","青島","煙臺(tái)"],"河南省":["鄭州市","洛陽(yáng)市","開(kāi)封"]};
var province = document.getElementById("province");
var city = document.getElementById("city");
//2.遍歷json中的所有key
for(var key in json){
//3.key封裝到option對(duì)象中
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.根據(jù)選擇的省去json中取得對(duì)應(yīng)數(shù)組
var cities = json[pronvinceKey];
//4.遍歷數(shù)組中的所有市,封裝到option對(duì)象中
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>
