Jason简单应用和城市级联-优快云博客

本文链接：https://blog.youkuaiyun.com/GuoWuZhu/article/details/102619904

Jason

Jason英文全称JavaScript Object Notation
JSON是一种轻量级的数据交换格式
JSON是独立语言
JSON易于理解
JSON使用JavaScript语法，但是JSON格式仅仅是一个文本，文本可以被任何编程语言读取及作为数据格式传递

JSON的作用

JSON是用于存储和传输数据的格式
JSON通常用于服务端向网页传递数据

JSON语法规则

语法：var 变量名=[{“属性1”:“值1”}…,{“属性n”:“值n”}]
数据为键/值对
数据由逗号分隔
大括号保存对象
方括号保存数组

JSON格式如何取值

获取单个存储对象的值：

var arr1 = {
"name":"杨","age":20
};
//获取JSON数据的方式2种：
console.log(arr1.name);//使用.的方式来获取
console.log(arr1["name"]);//使用数组下标的方式

获取数组存储对象的值：

var arr2 = [
{
"name":"李","age":20
},
{
"name":"赵欢","age":21
}
];
//获取值
console.log(arr2);
console.log(arr2[1].name);

JSON的案例：

省市级联

Select options集合
options 是select对象下面所有option的集合/数组
options 的属性：
length：返回集合的option元素数目，当length等于0的时候，作用就是清空所有的option标签
selectedIndex:设置或者返回select对象已选选项的索引值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
	select{
		width: 150px;
	font-size: 16px;
	}
</style>
<script>
	function $(id){
		return document.getElementById(id);
	}
	window.onload=function(){
	//获取DOM对象
	var oprovince = $('province');
	var ocity = $('city');
	//定义省份和城市的JSON数据类型定义
	var datas = [{
		"province":"湖北省","citys":["武汉市","襄阳市","枣阳市"]
	},
		{
		"province":"甘肃省","citys":["兰州市","天水市","定西市"]
		},
		{
		"province":"海南省","citys":["海口市","三亚市","文昌市"]
		}
		];
		//先获取省份，放到下拉框里
		for(var i=0;i<datas.length;i++){
		//console.log(datas[i].province);
			var op = document.createElement("option");
			op.innerHTML = datas[i].province;
			op.value = datas[i].province;
			oprovince.appendChild(op);
		}
	//获取城市
	//先获取湖北省的城市
	var defaultCity = datas[0].citys;
	//console.log(defaultCity);
	for(var i=0;i<defaultCity.length;i++){
		var op = document.createElement("option");
		op.innerHTML = defaultCity[i];
		op.value = defaultCity[i];
		ocity.appendChild(op);
	}
//当切换省份的时候，城市要跟着变化，绑定onchange事件
	oprovince.onchange=function(){
		/*
		* 思路：
		1、清空之前的城市列表
		2、不清楚我选择的是哪个省份
		* */
		//options属性：是select对象下面所有option的集合/数组
		//optoins有个属性，叫length：当length等于0的时候，
		//作用就是清空所有的option标签，全部删掉。
	ocity.options.length=0;
	//清空完之后，在放别的省份的城市
	//console.log(oprovince.selectedIndex);
	/*
	selectedIndex：设置或获取当前选中的选项的索引。
	下拉框的选项索引从0开始。
	* */
	var selectedCitys =
	datas[oprovince.selectedIndex].citys;
	for(var i=0;i<selectedCitys.length;i++){
		var op = document.createElement("option");
		op.innerHTML = selectedCitys[i];
		op.value = selectedCitys[i];
		ocity.appendChild(op);
		}
	}
}
</script>
</head>
<body>
	<select id="province"></select>
	<select id="city"></select>
</body>