省市区三级联动

·港岛妹妹

于 2021-01-13 19:51:14 发布

阅读量99

点赞数

分类专栏： js练习题文章标签： javascript

本文链接：https://blog.csdn.net/qq_44417271/article/details/112586614

版权

js练习题专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script src="citys.js" type="text/javascript" charset="utf-8"></script>
		<script src="machine.js" type="text/javascript" charset="utf-8"></script>
		<select id="province"></select>
		<select id="city"></select>
		<select id="area"></select>
		
		<script type="text/javascript">
			let province=$("#province")
			let city=$("#city")
			let area=$("#area")
			
			// 生成省份数据
			citys.forEach(item=>{
				// console.log(item)
				let option=document.createElement("option")
				option.innerHTML=item.provinceName
				$("#province").appendChild(option)
			})
			// 更新城市数据
			function updateCity(index){
				var index=index||0;
				city.innerHTML=""
				citys[index].mallCityList.forEach(item=>{
					// console.log(item)
					let option=document.createElement("option")
					option.innerHTML=item.cityName
					$("#city").appendChild(option)
				})
			}
			updateCity(0)
			// 更新区域数据
			function updateArea(provinceIndex,areaIndex){
				var index=index||0;
				area.innerHTML=""
				citys[provinceIndex].mallCityList[areaIndex].mallAreaList.forEach(item=>{
					// console.log(item)
					let option=document.createElement("option")
					option.innerHTML=item.areaName
					$("#area").appendChild(option)
				})
			}
			updateArea(0,0)
			province.onchange=function(){
				updateCity(this.selectedIndex)
				updateArea(this.selectedIndex,city.selectedIndex)
				// console.log(this.selectedIndex)
			}
			city.onchange=function(){
				updateArea(province.selectedIndex,this.selectedIndex)
			}
		
			
		</script>
	</body>
</html>