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>

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM