JS三级联动

最新推荐文章于 2025-03-11 03:30:28 发布

You-Betrayed-WC

最新推荐文章于 2025-03-11 03:30:28 发布

阅读量124

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/there_is_no_savi/article/details/126184274

版权

	<body>
		省：<select name="" id="province"></select>
		市：<select name="" id="city"></select>
		县/区：<select name="" id="county"></select>
		<script src="../../js/citys.js"></script>
		<script>
			var provinces=citys.districts[0].districts;//获取省份数组
			var _province=document.querySelector("#province")//获取省多选框
			//对省数组进行遍历，并赋值给多选框
			provinces.forEach(function(obj){
				_province.innerHTML+=`<option value="${obj.adcode}" >${obj.name}</option>`
			})
			
			var _city=document.querySelector("#city")
			_province.onchange=function(){
				showCity()
				showCounty()
			}
			showCity();
			function showCity(){
				_city.innerHTML="";
				var code=_province.value;
				var citys=provinces.find(function(item){
					return item.adcode==code
				})
				var city=citys.districts;
				city.forEach(function(obj){
					_city.innerHTML+=`<option value="${obj.adcode}" >${obj.name}</option>`
				})
			}
			_city.onchange=function(){
				showCounty()
			}
			var _county=document.querySelector("#county");
			showCounty();
			function showCounty(){
					_county.innerHTML="";
					var province=_province.value;//省编码
					var cityCode=_city.value;//市编码
					//根据省编码获取省对象
					var province=provinces.find(function(obj){
						return obj.adcode==province;
					})
					var citys=province.districts;
					var city=citys.find(function(item){
						return item.adcode==cityCode
					})
					var county=city.districts;
					county.forEach(function(obj){
						_county.innerHTML+=`<option value="${obj.adcode}" >${obj.name}</option>`
					})
				}
			
		</script>
	</body>