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>

javascript数组&省市联动分别用js数组和JSON实现的更多相关文章

  1. JavaScript数组常用方法解析和深层次js数组扁平化

    前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...

  2. 省市联动 纯html+js

    在js里面声明所有数据,并根据html的select事件触发js实现填充对应的数据到下拉框. 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  3. JavaScript实现省市联动

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. js数组的操作及数组与字符串的相互转化

    数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...

  5. .net中后台c#数组与前台js数组交互

    第一步:定义cs数组  cs文件里后台程序中要有数组,这个数组要定义成公共的数组.  public string[] lat = null;  public string[] lng = null; ...

  6. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  7. php数组转换js数组操作及json_encode应用

    对于php,个人感觉能够熟练操作数组和字符串,基本上已经是入门了,php本身有很多操作数组和字符串的函数,今天在做一个功能时,需要用Js动态的创建门店信息,这些信息是要从后台添加的,想来想去,通过ph ...

  8. [jQ/PHP]再谈使用JS数组储值的运用（提交PHP处理）

    --------------------------------------------------------------------------------------------------- ...

  9. 通过Javascript数组设计一个省市联动菜单

    通过Javascript数组设计一个省市联动菜单 使用Option内置类来完成下拉选项的创建 2.使用定时器实现一个时钟程序 3.使用PHP+JSON完成语音验证码 网址:http://yuyin.b ...

随机推荐

  1. SharePoint 2010 技术参数（整理）

    今天整理一些 SharePoint 2010 的技术参数,其内容都来自 SharePoint-Sandbox 网站. 有些参数值是硬性的,比如列表单条记录的尺寸:而有些是为了使用和性能考虑的推荐值. ...

  2. MyEclipse导入JAVA工程显示红色叉叉的解决方法

    当我们有时候导入一个新的工程的时候可能会出现以下这种情况,基本上是因为jar包路径的问题. 解决方法如下: 1.右击工程,选择properties 2.选择 Java Build Path -> ...

  3. vos话务抽查小方法

    问题: 假如现在公司落地前缀主要有三个分别如下: 9150:主要用来走正规量 880:用来走正规量 660:全业务(合法) 已知: 非法业务量主要有:博彩,发票,白银,黄金,期货 合法非正规量有:保健 ...

  4. 1.jdk的安装

    1.下载jdk放到某(E)盘底下的(java)某文件夹里 2.配置环境变量 (1)配置JAVA_HOME,CLASSPATH,PATH三个变量 其中JAVA_HOME必须的 JAVA_HOME=E:\ ...

  5. MySQL入门很简单: 9 插入 更新与删除数据

    1. 插入数据:INSERT 1)为表的所有字段插入数据 第一种: 不指定具体的字段名 INSERT INTO 表名 VALUES(值1,值2,...,值n): 第二种:INSERT语句中列出所有字段 ...

  6. 119. Pascal's Triangle II (Amazon) from leetcode

    Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle. Note t ...

  7. framework7对日历的一些效果处理

    现在的要求是日历中要区分已打卡和未打卡的显示,并且当月只显示当月的日历状态,其他月份不显示状态,并且打卡的日期不能大于当日 实现代码(精确到天): HTML: <div class=" ...

  8. The service command supports only basic LSB actions (start, stop, restart, try-restart, reload,force-reload, status)

    # service iptables save The service command supports only basic LSB actions (start, stop, restart, t ...

  9. 【转】Android的setTag

    前言 首先我们要知道setTag方法是干什么的,SDK解释为 Tags Unlike IDs, tags are not used to identify views. Tags are essent ...

  10. VPS 运行 Node.js 的一些经验

    VPS 系统选择 各系统安装难易对比 Ubuntu.Debian 较为简单,CentOS 稍麻烦,32位系统比64位更节省内存 DigitalOcean 甚至推出了 Ubuntu + Node.js ...