JS省市级联

最新推荐文章于 2022-11-14 15:07:48 发布

许你壹世静好岁月

最新推荐文章于 2022-11-14 15:07:48 发布

阅读量204

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Yangyang___/article/details/107436735

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<select id="pro" onchange="selectEd()">
		</select>
		<select id="city" onchange="selectEda()">
			<option value='0'>---请选择----</option>
		</select>
		<select id="area">
			<option value='0'>---请选择----</option>
		</select>
		<script type="text/javascript">
			var provice = [{
				name: "湖北",
				citys: [{
					city: "武汉",
					area: ["洪山区", "汉阳区"]
				}, {
					city: "咸宁",
					area:["咸安", "温泉"]
				}]
			}, {
				name: "湖南",
				citys: [{
					city: "长沙",
					area:['长沙1', '长沙2']
				}, {
					city: "常德",
					area:['常德1', '常德2']
				}]
			}];

			//alert(provice instanceof Array)
			var pro = document.getElementById("pro");
			var city = document.getElementById("city");
			var area = document.getElementById("area");
			for (i = 0; i < provice.length; i++) {
				var optionObj = document.createElement("option");
				optionObj.value = provice[i].name;
				optionObj.innerHTML = provice[i].name;
				optionObj.selected = "selected";
				pro.appendChild(optionObj);
			}
			var areaArr = new Array;
			function selectEd() {
				city.innerHTML = "<option value='0'>---请选择----</option>";
				let index = pro.selectedIndex;
				let val = pro.options[index].value;
				for (i in provice) {
					if (provice[i].name == val) {
						let citys = provice[i].citys;
						for (j in citys) {
							let optionObj = document.createElement("option");
							optionObj.value = citys[j].city;
							optionObj.innerHTML = citys[j].city;
							areaArr.push(citys[j]);
							city.appendChild(optionObj);
						}
					}
				}
			}
			function selectEda(){
				area.innerHTML = "<option value='0'>---请选择----</option>";
				let index = city.selectedIndex;
				let val = city.options[index].value;
				debugger
				for (i in areaArr) {
					if (areaArr[i].city == val) {
						let citys = areaArr[i].area;
						for (j in citys) {
							let optionObj = document.createElement("option");
							optionObj.value = citys[j];
							optionObj.innerHTML = citys[j];
							//area.push(citys[j]);
							area.appendChild(optionObj);
						}
					}
				}
			}
		</script>
	</body>
</html>

许你壹世静好岁月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS省市级联

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <select id="pro" onchange="selectEd()"> </select> <select id="city" onchange="selectEda()">.
复制链接

扫一扫