纯原生js实现【省市二级联动】小案例_js省市二级联动-优快云博客

本文链接：https://blog.youkuaiyun.com/qq2981118661/article/details/127815527

本文介绍了一种使用JavaScript实现的省市二级联动选择器，通过JSON数据动态加载城市与对应地级市选项，展示了如何在用户更改城市时更新地级市下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图:
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>省市二级联动</title>
	</head>
	<body>
		
		选取你的城市:<select id="city" name="city">
						<!-- 初始化城市 -->
		                <option>河南省</option>
		</select> 
		选取你的地级市:<select id="plc" name="Prefecturelevelcity">
						<!-- 初始化地级市 -->
		             <option>南阳市</option>
					 <option>郑州市</option>
					 <option>开封市</option>
					 <option>洛阳市</option>
		</select> 
		
		<script type="text/javascript">
		
			//以一个js对象来储存数据,也就是json格式的数据
			var cityppp={
				"河南省":["南阳市","郑州市","开封市","洛阳市"],
				"北京市":["海淀区","朝阳区","石景山区","丰台区"],
				"山东省":["青岛市","济南市","淄博市","烟台市","威海市","潍坊市"],
			}
			
			//获取两个下拉框的标签元素
			var city=document.getElementById("city");
			var plc=document.getElementById("plc");
				
				// 定义这个布尔类型是为了让触发事件后匿名函数里的操作只执行一次
				// 也就是Vue里的事件只触发一次得那个指令 v-once
				var flag = true;
				
				//当下拉框city获取到焦点的时候开始执行匿名函数里的操作
				city.onfocus=function(){
					
					 if (flag) {//这里起到一个阀门的作用   开启阀门
					 
						//获取city元素里面的所有option
						 var liArr=city.getElementsByTagName("option");
						 //删除city下拉框里的初始值
						 for(var i=0;i<liArr.length;i++){
						 	//通过父元素,删除子元素
						 	city.removeChild(liArr[i]);
						 	i--;
						 }
						 
						 //遍历cityppp对象里的所有key
						 for (var a in cityppp) {
							 //创建一个option节点
							var cityoption =document.createElement("option");
							//创建一个文字节点
							var textNode=document.createTextNode(a);
							//将文字节点加入到option节点
							cityoption.appendChild(textNode);
							//将option标签加入到城市下拉框select里面
							city.appendChild(cityoption);
							};
						 flag = false; //这里就关闭阀门 这个if分支里的代码只有在city元素再次获得焦点的时候才会执行
					 }else{
						return;
					}
				}
				
				
				//用来接收city下拉框里的值发生改变时,触发事件的元素标签里的文字也就是值
				//因为你要改变下拉框里的值,肯定要点击select标签里的option标签
				//event.srcElement.value;也就是这句话
				//同时这一步也起着关联作用,城市下拉框和地级市下拉框关联
				var citystr="";
					
				// 当城市下拉框里面的值发生改变时触发匿名函数
				city.onchange=function(){					
					
					//这里删除子元素有两个用处,第一个是清除之前地级市下拉框里初始化的值
					//第二个是,防止每次city下拉框发生改变时,里面的内容会重复添加,就导致
					//地级市下拉框里的option标签越来越多,并且呈现的地级市不对
					var liArr=plc.getElementsByTagName("option");
					for(var i=0;i<liArr.length;i++){
						//通过父元素,删除子元素
						plc.removeChild(liArr[i]);
						i--;
					}
					
					//city下拉框里的值发生改变时,触发事件的元素标签里的文字也就是值
					//因为你要改变下拉框里的值,肯定要点击select标签里的option标签
					citystr=event.srcElement.value;
					console.log(cityppp[citystr]); //Test
					
					//遍历cityppp对象里的key为河南的对应的vlaue值
					for (var a in cityppp[citystr]) {
						// console.log(cityppp[citystr][a]); //Test
						//创建option标签节点
					  var optionplc =document.createElement("option");
					  //这一步很关键创建文字节点,cityppp[citystr][a]其实就是获取cityppp对象里的key,然后又通过key获取key对应的value值
					  //a在这里只是下标通过数组下标的形式将内容遍历出来,说白了就是数组套数组,很常见的json数据取出,在Java里没有这样的写法,但是
					  //学过python还有js你就会见过,这一步也就是在遍历的过程中,把城市下拉框的内容对应的地级市给取出来
					  var textNode=document.createTextNode(cityppp[citystr][a]);
					  //最后将当前取出来的地级市加到option标签中
					  optionplc.appendChild(textNode);
					  //将整理好的option标签节点加入到地级市的下拉框中
					  plc.appendChild(optionplc);											
					}
				}		
									
		</script>
	</body>
</html>