标签：
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>
javascript数组&省市联动分别用js数组和JSON实现
标签：
原文地址：http://www.cnblogs.com/GumpYan/p/5689433.html
