省份联动变化 JS AJAX JSON

最新推荐文章于 2024-09-17 14:30:35 发布

一夜醒来头秃了

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量251

点赞数 10

文章标签： js ajax json

本文链接：https://blog.csdn.net/hs1219462412/article/details/114040399

版权

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select class="province">
			<!-- 省份 -->
			<option value="A">请选择省/市</option>
		</select>
		<select class="city">
			<!-- 城市 -->
			<option value="B">请选择市/区</option>
		</select>
		<select class="town">
			<!-- 镇 -->
			<option value="C">请选择县/镇</option>
		</select>
	</body>
	<script type="text/javascript">
		// 获取元素
		const sel1 = document.querySelector('.province');
		const sel2 = document.querySelector('.city');
		const sel3 = document.querySelector('.town');
		let data;
		let key;
		// 创建整个ajax过程
		let xhr = new XMLHttpRequest();
		xhr.open('GET', 'proData.json', true);
		xhr.send();
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4 && xhr.status === 200) {
				data = JSON.parse(xhr.responseText);
				console.log(data);
				// 页面渲染省/市
				sel1.innerHTML = createOption1(data);
			}
		}
		
		// 第一个选择框改变值 第二个选择框对应改变
		sel1.onchange = function() {
			let sel1Val = sel1.value;
			sel2.innerHTML = createOption2(data,sel1Val);
			sel3.innerHTML = `<option value="C">请选择县/镇</option>`;
		}
		
		// 第二个选择框改变值 第三个选择框对应改变
		sel2.onchange = function(){
			let sel2Val = sel2.value;
			sel3.innerHTML = createOption3(data,sel2Val);
		}




		// 渲染省/市函数
		function createOption1(data) {
			let res = '' + `<option value="A">请选择省/市</option>`;
			let list = [];
			data['list'].forEach(function({name}) {
				res += `<option value="${name}">${name}</option>`;
			})
			return res;
		}
		
		// 渲染市/区函数
		function createOption2(data,sel1Val) {
			let res = '' + `<option value="B">请选择市/区</option>`;
			data['list'].forEach(function(val, index) {
				// 选择框的值等于遍历中的值 返回 角标
				if (sel1Val === data['list'][index]['name']) {
					key = index;
				}
			})
			// 遍历 选择框1的值 对应 的市/区的 数组
			data['list'][key]['list'].forEach(function({name}) {
				res += `<option value="${name}">${name}</option>`;
			})
			return res;
		}
		
		// 渲染市/区函数
		function createOption3(data,sel2Val) {
			let key2;
			let key3;
			let res = '' + `<option value="B">请选择县/镇</option>`;
				// 选择框的值等于遍历中的值 返回 角标
			data['list'][key]['list'].forEach(function(val, index) {
				// 选择框的值等于遍历中的值 返回 角标
				if (sel2Val === data['list'][key]['list'][index]['name']) {
					key2 = index;
				}
			})
			// 部分城市没有县则结束函数
			if(!data['list'][key]['list'][key2]['list']) {
				return res = '' + `<option value="无">无</option>`;
			}
			data['list'][key]['list'][key2]['list'].forEach(function(val, index) {
				// 选择框的值等于遍历中的值 返回 角标
				if (sel2Val === data['list'][key]['list'][key2]['list'][index]['name']) {
					key3 = index;
				}
			})
			// 遍历 选择框1的值 对应 的市/区的 数组
				data['list'][key]['list'][key2]['list'].forEach(function({name}) {
					res += `<option value="${name}">${name}</option>`;
				});
			return res;
		}
	</script>
</html>

部分JSON数据

{
“city_id”: “CH”,
“name”: “中国”,
“en”: “China”,
“list”: [
{
“city_id”: “CH01”,
“name”: “北京”,
“en”: “”,
“list”: [
{
“city_id”: “CH010100”,
“name”: “北京”,
“en”: “Beijing”
},
{
“city_id”: “CH010200”,
“name”: “海淀”,
“en”: “haidian”
},
{
“city_id”: “CH010300”,
“name”: “朝阳”,
“en”: “chaoyang”
},
{
“city_id”: “CH010400”,
“name”: “顺义”,
“en”: “Shunyi”
},
{
“city_id”: “CH010500”,
“name”: “怀柔”,
“en”: “Huairou”
},
{
“city_id”: “CH010600”,
“name”: “通州”,
“en”: “tongzhou”
},
{
“city_id”: “CH010700”,
“name”: “昌平”,
“en”: “Changping”
},
{
“city_id”: “CH010800”,
“name”: “延庆”,
“en”: “yanqing”
},
{
“city_id”: “CH010900”,
“name”: “丰台”,
“en”: “fengtai”
},
{
“city_id”: “CH011000”,
“name”: “石景山”,
“en”: “shijingshan”
},
{
“city_id”: “CH011100”,
“name”: “大兴”,
“en”: “Daxing”
},
{
“city_id”: “CH011200”,
“name”: “房山”,
“en”: “fangshan”
},
{
“city_id”: “CH011300”,
“name”: “密云”,
“en”: “Miyun”
},
{
“city_id”: “CH011400”,
“name”: “门头沟”,
“en”: “mentougou”
},
{
“city_id”: “CH011500”,
“name”: “平谷”,
“en”: “pinggu”
}
]
},
{
“city_id”: “CH02”,
“name”: “上海”,
“en”: “”,
“list”: [
{
“city_id”: “CH020100”,
“name”: “上海”,
“en”: “Shanghai”
},
{
“city_id”: “CH020200”,
“name”: “闵行”,
“en”: “minhang”
},
{
“city_id”: “CH020300”,
“name”: “宝山”,
“en”: “baoshan”
},
{
“city_id”: “CH020500”,
“name”: “嘉定”,
“en”: “jiading”
},
{
“city_id”: “CH020600”,
“name”: “浦东南汇”,
“en”: “pudongnanhui”
},
{
“city_id”: “CH020700”,
“name”: “金山”,
“en”: “jinshan”
},
{
“city_id”: “CH020800”,
“name”: “青浦”,
“en”: “qingpu”
},
{
“city_id”: “CH020900”,
“name”: “松江”,
“en”: “songjiang”
},
{
“city_id”: “CH021000”,
“name”: “奉贤”,
“en”: “fengxian”
},
{
“city_id”: “CH021100”,
“name”: “崇明”,
“en”: “chongming”
},
{
“city_id”: “CH021200”,
“name”: “徐家汇”,
“en”: “xujiahui”
},
{
“city_id”: “CH021300”,
“name”: “浦东”,
“en”: “pudong”
}
]
},
{
“city_id”: “CH03”,
“name”: “天津”,
“en”: “”,
“list”: [
{
“city_id”: “CH030100”,
“name”: “天津”,
“en”: “Tianjin”
},
{
“city_id”: “CH030200”,
“name”: “武清”,
“en”: “wuqing”
},
{
“city_id”: “CH030300”,
“name”: “宝坻”,
“en”: “baodi”
},
{
“city_id”: “CH030400”,
“name”: “东丽”,
“en”: “dongli”
},
{
“city_id”: “CH030500”,
“name”: “西青”,
“en”: “xiqing”
},
{
“city_id”: “CH030600”,
“name”: “北辰”,
“en”: “beichen”
},
{
“city_id”: “CH030700”,
“name”: “宁河”,
“en”: “ninghe”
},
{
“city_id”: “CH030800”,
“name”: “汉沽”,
“en”: “Hangu”
},
{
“city_id”: “CH030900”,
“name”: “静海”,
“en”: “Jinghai”
},
{
“city_id”: “CH031000”,
“name”: “津南”,
“en”: “jinnan”
},
{
“city_id”: “CH031100”,
“name”: “塘沽”,
“en”: “Tanggu”
},
{
“city_id”: “CH031200”,
“name”: “大港”,
“en”: “dagang”
},
{
“city_id”: “CH031400”,
“name”: “蓟县”,
“en”: “jixian”
}
]
}
｝