1.定義數組的三種方式:

js數組支持的下標支持中文。js中的沒有二維數組之說,我們僅僅是變量中又可以存儲數組
arr['廣東省']=['廣州','深圳','珠海'];
arr['湖北省']=['武漢','襄樊','赤壁'];
3.關於下拉菜單select動態添加options的一些操作
(1)new Option(text,value);其中text表示的是<option> </option>之間的文字,就是給別人看的,value就是option對象的value屬性
(2)動態添加select中的option項,用add(new Option(text,value))
var proSel=document.getElementById("province");
//for in獲取的是下標
for(temp in arr){
proSel.add(new Option(temp,temp));
}
(3)動態刪除select中的所有的options項,只要將length=0
document.getElementById("ddlResourceType").options.length=0;
但是如果要保留一項就可以這樣設置
清空下拉列表框信息
var citySel=document.getElementById("city");
citySel.options.length=1;
(4)動態刪除select中的某一項option,用remove(index)
document.getElementById("ddlResourceType").options.remove(index);
4.關於JSON數據
5.實現字符串和JSON格式之間的轉換方法
(1)把字符串轉換成JSON格式
var obj=JSON.parse(str);
console.info("當前類型為:"+typeof(str));
(2)把JSON格式轉換成字符串
var str=JSON.stringfy(obj);
console.info("當前類型為:"+typeof(obj));
6.關於for in
for in 的作用是用來循環下標的,在JSON中常用,得到的是下標temp,要想獲取數組的值還要進行arr[temp]
for(temp in arr){
console.info("下標:"+temp+",值為:"+arr[temp]);
}
7.關於獲取JSON輸出的格式兩種格式
var str='{"name":"demo","age":"18"}';
第一種:obj.name和obj.age
第二種:obj['name']和obj['age']
栗子:
var proJSON={"1":"廣東省","2":"湖北省"};
var cityJSON={"1":{"020":"廣州","0755":"深圳","0710":"珠海"},"2":{"021":"武漢","0752":"十堰","0712":"襄樊"}};
var province=document.getElementById("province");
for(temp in proJSON){
province.add(new Option(proJSON[temp],temp));
}
8.兩個案例
(1)基於數組的級聯列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基於數組級聯列表</title>
<script>
var arr=new Array();
//js數組支持的下標支持中文。js中的沒有二維數組直說,我們僅僅是變量中又可以存儲數組
arr['廣東省']=['廣州','深圳','珠海'];
arr['湖北省']=['武漢','襄樊','赤壁'];
window.onload=function(){
//向省會賦值下拉列表框
var proSel=document.getElementById("province");
//for in獲取的是下標
for(temp in arr){
proSel.add(new Option(temp,temp));
console.info("下標:"+temp+",值為:"+arr[temp]);
}
}
function setCity(){
//清空下拉列表框信息
var citySel=document.getElementById("city");
citySel.options.length=1;
//獲取選中的省會信息,value值就是底下option的value值,即為廣東省,湖北省
var pro=document.getElementById("province").value;
//如果選擇的是"提示信息"就是"選擇省會",則不賦值
if(pro=="")
return;
for(var i=0;i<arr[pro].length;i++){
citySel.add(new Option(arr[pro][i],arr[pro][i]));
}
}
</script>
</head>
<body>
<select id="province" onchange="setCity()">
<option value="">--選擇省會--</option>
</select>
<select id="city">
<option value="">--選擇城市--</option>
</select>
</body>
</html>
(2)基於JSON的級聯列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基於json級聯列表</title> <script> //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']); //采用JSON格式來存儲相應的數據和編碼 //proJSON和cityJSON是通過"1","2"聯系起來的 var proJSON={"1":"廣東省","2":"湖北省"}; var cityJSON={"1":{"020":"廣州","0755":"深圳","0710":"珠海"},"2":{"021":"武漢","0752":"十堰","0712":"襄樊"}}; window.onload=function(){ var province=document.getElementById("province"); for(temp in proJSON){ province.add(new Option(proJSON[temp],temp)); } } function setCity(){ //只要觸發了此事件,二級菜單必須還原 var city=document.getElementById('city'); city.options.length=1; //獲取被選中的省會的值value值就是1,2 var val=document.getElementById("province").value; console.info("cityJSON:"+cityJSON[val]); //如果沒有選擇任何省會信息,則直接返回 if(!cityJSON[val]) return; //通過選中的值,獲取二級菜單列表 var sonJSON=cityJSON[val]; for(temp in sonJSON){ city.add(new Option(sonJSON[temp],temp)); } } </script> </head> <body> <select id="province" onchange="setCity()"> <option value="">--選擇省會--</option> </select> <select id="city"> <option value="">--選擇城市--</option> </select> </body> </html>