JSON要点总结,文末有三级联动中国城市源码
JSON部分要点总结
1.在JSON对象中,可以存储任何类型的数据;
2.JSON不支持变量函数或对象实例;
3.JSON适用于存储和传输数据的格式,通常用于服务端向网页传输数据;
4.JSON是轻量级的文本数据交换格式;
5.JSON字符串转换为JSON对象 使用 JSON.parse(参数);
6.JSON对象转换为JSON字符串使用 JSON.stringify(参数);
三级联动实现过程如下,分步理解,可以变打印边写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="area.js"></script>
</head>
<body>
<select name="" id="provence"></select>
<select name="" id="city"></select>
<select name="" id="area"></select>
<script>
var pro = document.querySelector('#provence');
var city = document.querySelector('#city');
var area = document.querySelector('#area');
//获取省份信息
for (var i in place) {
// 创建节点,将省份添加到页面
var opa = document.createElement('option');
// console.log(i);
opa.innerHTML = i;
pro.appendChild(opa);
}
//获取city信息,默认河南省
for (var i in place['河南省']) {
// console.log(place['河南省'][i]);//求出的是数组市
// console.log(i)
for (var j in place['河南省'][i]) {
// console.log(j);//求出市
var opa = document.createElement('option');
opa.innerHTML = j;
city.appendChild(opa);
}
}
//获取area信息,默认河南省郑州市
// console.log(place['河南省'][0]['郑州市']);
for (var i in place['河南省'][0]['郑州市']) {
// console.log(place['河南省'][0]['郑州市'][i])
for (var j in place['河南省'][0]['郑州市'][i]) {
// console.log(j);
var opa = document.createElement('option');
opa.innerHTML = j;
area.appendChild(opa);
}
}
//存储省份信息,//默认河南省
var proce = '河南省'
//修改省份信息,绑定事件
pro.onchange = function () {
// console.log(this.value);
proce = this.value;
//清空市里面的信息
city.innerHTML = '';
//控制省对应的城市信息
for (var i in place[proce]) {
// console.log(place[proce][i])//打印出省对应的市数组
for (var j in place[proce][i]) {
// console.log(j);//选择的省对应的市信息
var opa = document.createElement('option');
opa.innerHTML = j;
city.appendChild(opa);
}
}
//存储默认省份城市的信息
var coun=city.children[0].innerHTML;
// console.log(city.children[0].innerHTML+'11111111')
//清空区的信息
area.innerHTML='';
//控制市修改对应区的信息
// console.log(place[proce][0][coun]);//区对应的数组
for(i in place[proce][0][coun]){
for(j in place[proce][0][coun][i]){
// console.log(j);//对应的区
var opa=document.createElement('option');
opa.innerHTML=j;
area.appendChild(opa);
}
}
}
//身份确定之后,通过改变市,改变区
city.onchange=function(){
var cityValue=this.value;
// console.log(this.value)
//先清空区的信息
area.innerHTML='';
for(var i in place[proce][0][cityValue]){
// console.log(place[proce][0][cityValue]);
for(var j in place[proce][0][cityValue][i]){
// console.log(j);
var opa=document.createElement('option');
opa.innerHTML=j;
area.appendChild(opa);
}
}
}
</script>
</body>
</html>
以下是三级联动所需的JSON源码,因文章字数,可在百度网盘查看
JSON三级联动链接:https://pan.baidu.com/s/1ufSVRddLg5THi30JWhPa1g
提取码:ed9z