JAVA EE-JS-二級聯動
沉思就是勞動，思考就是行動。 —— 雨果
首先我們先看一下最後要實現的效果。
先完成選擇框部分。
<body onload="fun1();" >
<select id="province" onchange="fun2();" >
<option>---請選擇省---</option>
</select>
<select id="city" >
<option>---請選擇市---</option>
</select>
</body>然後再書寫相應的JS代碼。
<script type="text/javascript">
//json對象
// 相當於java當中的map
/*
var json = {"name":"tom","age":18};
//遍歷json對象的鍵
for(var key in json){
//alert(key);
alert(key+"==>"+json[key])
}
*/
//---------------------------------------------------------
var json = {"河北省":["石家莊","廊坊","滄州"],
"山西省":["太原","大同","運城"],
"黑龍江省":["哈爾濱","齊齊哈爾","佳木斯"]};
// 初始化省的下拉選
function fun1(){
//1 獲得省的select對象
var province = document.getElementById("province");
//2 遍歷json的所有鍵
for(var key in json){
// 創建一個option
var option = document.createElement("option");
option.innerHTML = key; // <option>河北省</option>
// 將option添加到select中
province.appendChild(option);
}
}
function fun2(){
//1 獲得市的select對象
var province = document.getElementById("province");
var city = document.getElementById("city");
//2 清空市級下拉選的數據
city.length =1;
//3 獲得用戶選擇的省
if(!province.selectedIndex){
//用戶選擇的是提示選項=>什麼也不做
return;
}
var options = province.options;
var pName = options[province.selectedIndex].innerHTML;
//4 從json中根據省獲得 省下的市數據
var cities = json[pName];
//5 遍歷市級的數組
for(var i = 0 ; i<cities.length;i++){
var cityName = cities[i];
//創建市的option
var option = document.createElement("option");
option.innerHTML = cityName;
// 將option添加到select中
city.appendChild(option);
}
}
</script>
