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. python3绘图示例6-1（基于matplotlib，绘图流程介绍及设置等）

    #!/usr/bin/env python# -*- coding:utf-8 -*- import os import pylab as pyimport numpy as npfrom matpl ...

  2. nginx的安装及简单负载均衡配置

    Nginx 是一个很强大的高性能Web和反向代理服务器,它具有很多非常优越的特性.本人目前所在公司也使用nginx,主要用来做负载均衡服务器.同时也可以作为邮件代理服务器. 1. nginx的安装.本 ...

  3. PHP判断变量是否小数并对小数进行处理

    /*判断是否为小数demo*/$a = 1.2; if(is_int($a)){ echo "$a 是整数!"; }else{ echo "$a 不是整数!"; ...

  4. 笨办法学Python（二十四）

    习题 24: 更多练习 你离这本书第一部分的结尾已经不远了,你应该已经具备了足够的 Python 基础知识,可以继续学习一些编程的原理了,但你应该做更多的练习.这个练习的内容比较长,它的目的是锻炼你的 ...

  5. 笨办法学Python（十三）

    习题 13: 参数.解包.变量 在这节练习中,我们将讲到另外一种将变量传递给脚本的方法(所谓脚本,就是你写的 .py 程序).你已经知道,如果要运行 ex13.py,只要在命令行运行 python e ...

  6. PHP ： 数据库中int类型保存时间并通过年月份时分秒进行显示

    1.表设计: 2.数据库操作页面:将时间戳插入到数据库中 我们到数据库中可以看到: 3.我们将数据进行显示: 页面结果:(二维数组) 4.以为用mysqli_fetch_all得到的是二维数组,那么我 ...

  7. java——栈和队列 面试题

    (1)栈的创建 (2)队列的创建 (3)两个栈实现一个队列 (4)两个队列实现一个栈 (5)设计含最小函数min()的栈,要求min.push.pop.的时间复杂度都是O(1) (6)判断栈的push ...

  8. git/github初级运用自如（转自：虫师）

    注:本文来源于 虫师博客(http://www.cnblogs.com/fnng/archive/2012/01/07/2315685.html) ,内容详尽,真实有用. 另:发一个github使用教 ...

  9. .net core 2.0 WIndows IIS下发布（WIN 10环境）

    最近在做练习,发布.net core webapi在本机IIS上,使用.net core的文件系统发布到IIS后,出现错误 500.19 观察了下页面如下 查阅资料才知道是少安装了一个DotNetCo ...

  10. JS显示上一周

    <html> <head> <script> var currDT; var aryDay = new Array("日","一&qu ...