您的位置：首页 > Web前端 > JavaScript

javascript数组&省市联动分别用js数组和JSON实现

2016-07-20 19:05 543 查看
1.定义数组的三种方式：

**数组可以存放不同的数据类型

第一种：

var arr=[1,2,3]; var arr=[1,"2",true];

第二种：
使用内置对象，Array对象
var arr1=new Array(5); //定义一个数组，数组的长度是5
arr1[0]="1";

var arr1=new Array(3);
arr1[0]=1;
arr1[1]="a";
arr1[2]=true;
alert(arr1);



第三种：
使用内置对象Array
var arr2=new Array(3,4,5); //定义一个数组，数组里面的元素是3 4 5

var arr=new Array(6,7,8);
alert(arr);

**数组里面有一个属性 length: 获取数组的长度

var arr=[1,2,3];
alert("length: "+arr.length);

　　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数据

1. json是什么
* 它是js提供的一种数据交换格式！

2. json的语法
* {}：是对象！
> 属性名必须使用双引号括起来！单引不行！！！
> 属性值：
* null
* 数值
* 字符串
* 数组：使用[]括起来
* boolean值：true和false

注意，key也要在双引号中！

3. 应用json
* var person = {"name":"zhangSan", "age":18, "sex":"male"};

4. json与xml比较
* 可读性：XML胜出
* 解析难度：JSON本身就是JS对象（主场作战），所以简单很多
* 流行度：XML已经流行好多年，但在AJAX领域，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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航