基於JSON的級聯列表實現
1、采用JSON格式存儲相應的數據；省份ProJSON，城市:cityJSON;
var proJSON={"1":"廣東省","2":"湖北省"}; var cityJSON={"1":{'020':'廣州','0755':'深圳','0756':'珠海'},'2':{'027':'武漢','0710':'襄樊','0715':'赤壁'}}
2.頁面加載完成后需要顯示省份的下拉框，因此要讀取ProJSON，通過for in循環添加option。
window.onload=function(){ var province=document.getElementById("province"); for(temp in proJSON){ province.add(new Option(proJSON[temp],temp));//參數分別是text，和value;text是用來顯示出來的。 } }
3.一旦省份下拉框觸發onChange事件。
首先，還原2級菜單；
然后，獲取選中的省份下標值；
最后，根據下標值尋找相應的子數據；
function setCity(){ // 只要觸發了此事件,則二級菜單必須還原 var city=document.getElementById('city'); city.options.length=1; // 獲取被選中省會的下標值 var val=document.getElementById("province").value; console.info("cityJSON:" + cityJSON[val]); // 如果沒有選擇任何省會信息則直接返回 if(!cityJSON[val]) return; // 通過選中的值獲取二級菜單的json數據 var sonJSON=cityJSON[val]; for(temp in sonJSON){ city.add(new Option(sonJSON[temp],temp)); } }
完整的代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基於數組級聯列表</title>
<script type="text/javascript">
// JSON: 主要用於數據交換,其實JSON就是有格式的字符串
var str='{"name":"demo","age":"18"}';
console.info("當前類型為:" + typeof(str));
// 把字符串轉化為JSON格式
var obj=JSON.parse(str);
console.info("當前類型為:" + typeof(obj));
// JSON輸出訪問的兩種方式
console.info(obj.name + "," + obj.age + "||" + obj['name'] + "," + obj['age']);
for(temp in obj){
console.info(temp + ":" + obj[temp]);//json中下標就是字符串；
}
str=JSON.stringify(obj);//就是說把原來是對象的類型轉換成字符串類型;
console.info("當前類型為:" + typeof(str));
// 采用JSON格式來存儲相應的數據和編碼
var proJSON={"1":"廣東省","2":"湖北省"};
var cityJSON={"1":{'020':'廣州','0755':'深圳','0756':'珠海'},'2':{'027':'武漢','0710':'襄樊','0715':'赤壁'}}
window.onload=function(){
var province=document.getElementById("province");
for(temp in proJSON){
province.add(new Option(proJSON[temp],temp));//參數分別是text，和value;text是用來顯示出來的。
}
}
function setCity(){
// 只要觸發了此事件,則二級菜單必須還原
var city=document.getElementById('city');
city.options.length=1;
// 獲取被選中省會的下標值
var val=document.getElementById("province").value;
console.info("cityJSON:" + cityJSON[val]);
// 如果沒有選擇任何省會信息則直接返回
if(!cityJSON[val]) return;
// 通過選中的值獲取二級菜單的json數據
var sonJSON=cityJSON[val];
for(temp in sonJSON){
city.add(new Option(sonJSON[temp],temp));
}
}
</script>
</head>
<body>
<!-- 數據的三種存儲方式:
1: 數據庫: 安全高、可以存儲有結構但是耗資源
2: properties: 存儲非敏感數據,且Key value格式,省資源的
3: XML: 存儲非敏感數據,且支持有結構 目前一般用於配置文件
4: 硬編碼: 主要存儲非敏感數據,且不改不的數據
-->
<select id="province" onChange="setCity()">
<option value="">--選擇省會--</option>
</select>
<select id="city">
<option value="">--選擇城市--</option>
</select>
</body>
</html>