zoukankan      html  css  js  c++  java
  • javascript数组&省市联动分别用js数组和JSON实现

    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>
  • 相关阅读:
    p 继承
    linux
    python 类的特性
    python 类的继承
    python 类
    pyhon对象初始
    coding++:win10家庭版升级专业版方案
    coding++:Java 获取request中的参数
    coding++:高并发解决方案限流技术--计数器--demo
    coding++:高并发解决方案限流技术---漏桶算法限流--demo
  • 原文地址:https://www.cnblogs.com/GumpYan/p/5689433.html
Copyright © 2011-2022 走看看