白学的小知识[三级联动]-优快云博客

本文链接：https://blog.youkuaiyun.com/c_made_c/article/details/135287168

文章详细描述了如何使用HTML和JavaScript实现一个省市区三级联动的选择器，通过动态加载数据来更新下拉选项，以提供更好的用户体验。

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

代码：


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
</head>
<body>
	<select id="sheng" onchange="fn(this)">
		<!-- 创建省 -->
	    <option value="1">-请选择-</option>
		<option value="2">江西</option>
		<option value="3">湖北</option>
		<option value="4">北京</option>
		<option value="5">上海</option>
	</select>
	<!-- 创建市 -->
	<select id="shi" onchange="fn1(this)">
	    <option value="1">-请选择-</option>
		<option value="2">---</option>
		<option value="3">---</option>
		<option value="4">---</option>
	</select>
	<select id="qu">
		<!-- 创建区 -->
	    <option value="1">-请选择-</option>
		<option value="2">---</option>
		<option value="3">---</option>
		<option value="4">---</option>
	</select>
</body>
	<script>
		//获取省市区
		var sheng = document.getElementById("sheng")
		var shi = document.getElementById("shi")
		var qu = document.getElementById("qu")
		//创建数组
		//江西省的市
		var arr1 =["南昌市","景德镇","九江市"]
		//湖北的市
		var arr2 =["武汉市","宜昌市","黄石市"]
		//北京的市
		var arr3 =['  东城市','西城市',"朝阳市"]
		//上海的市
		var arr13 =['黄埔市','普陀市',"长宁市"]
		//南昌市的区
		var arr4 =["东湖区","西湖区","青云谱区"]
		//景德镇的区
		var arr5 =["昌江区","珠山区","不知道"]
		//九江市的区
		var arr6 =["浔阳区","彭泽县","柴桑区"]
		//武汉市的区
		var arr7 =["武昌区","江汉区","江岸区"]
		//宜昌市的区
		var arr8 =["武陵区","西陵区","伍家岗区"]
		//黄石市的区
		var arr9 =["黄石港","西塞山","下陆区"]
		//东城市的区
		var arr10 =["不知道","不知道","不知道"]
		//西城市的区
		var arr11 =["不知道","不知道","不知道"]
		//朝阳市的区
		var arr12 =["你猜","不知道","不知道"]
		//黄埔市的区
		var arr14 =["黄浦区","不知道","不知道"]
		//普陀市的区
		var arr15 =["普陀区","不知道","不知道"]
		//长宁市的区
		var arr16 =["长宁区","不知道","不知道"]
		// 获取option
		//省
		var opt1 =document.querySelectorAll("#sheng>option")
		//市
		var opt2 =document.querySelectorAll("#shi>option")
		//区
		var opt3 =document.querySelectorAll("#qu>option")
		console.log(opt1);
		function fn(user){
			//江西
			if(user.value == "2"){
				for(var i = 0;i<arr1.length;i++){
					opt2[i+1].innerHTML = arr1[i]
				}
			}
			//湖北
			if(user.value == "3"){
				for(var k = 0;k<arr2.length;k++){
					opt2[k+1].innerHTML = arr2[k]
				}
			}
			//北京
			if(user.value == "4"){
				for(var i = 0;i<arr1.length;i++){
					opt2[i+1].innerHTML = arr3[i]
				}
			}
			//上海
			if(user.value == "5"){
				for(var i = 0;i<arr1.length;i++){
					opt2[i+1].innerHTML = arr3[i]
				}
			}
		}
		function fn1(user){
			//南昌市的区
			if(user.value == "2"&&sheng.value=="2"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr4[i]
				}
			}
			//景德镇的区
			if(user.value == "3"&&sheng.value=="2"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr5[i]
				}
			}
			//九江市的区
			if(user.value == "4"&&sheng.value=="2"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr6[i]
				}
			}
			//武汉市的区
			if(user.value == "2"&&sheng.value=="3"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr7[i]
				}
			}
			//宜昌市的区
			if(user.value == "3"&&sheng.value=="3"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr8[i]
				}
			}
			//黄石市的区
			if(user.value == "4"&&sheng.value=="3"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr9[i]
				}
			}
			//东城市的区
			if(user.value == "2"&&sheng.value=="4"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr10[i]
				}
			}
			//西城市的区
			if(user.value == "3"&&sheng.value=="4"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr11[i]
				}
			}
			//朝阳市的区
			if(user.value == "4"&&sheng.value=="4"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr12[i]
				}
			}
			//黄埔市的区
			if(user.value == "2"&&sheng.value=="4"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr10[i]
				}
			}
			//普陀市的区
			if(user.value == "3"&&sheng.value=="4"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr11[i]
				}
			}
			//长宁市的区
			if(user.value == "4"&&sheng.value=="4"){
				for(var i = 0;i<arr1.length;i++){
					opt3[i+1].innerHTML = arr12[i]
				}
			}
		}
		
	</script>
</html>

样式：

三级联动