Java 小白省市县三级联动_java省市区三级联放在数组里-优快云博客

本文链接：https://blog.youkuaiyun.com/Lin_bai_/article/details/112830880

本文面向Java初学者，详细介绍了如何实现省市区县的三级联动效果，通过实例代码解析了相关逻辑和数据交互，帮助新手理解动态下拉菜单的构建。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<select id="sheng">
		    <option value="">-请选择-</option>
		</select>
		
		<select id="shi">
		    <option value="">-请选择-</option>
		</select>
		
		<select id="xian">
		    <option value="">-请选择-</option>
		</select>
		<script>
			var osheng = document.getElementById("sheng");
			var oshi = document.getElementById("shi");
			var oxian = document.getElementById("xian");
			var arr_sheng = ["陕西省", "云南省", "四川省", "山西省"]; <!--创建一个一维数组，存入省的值-->
			
			var arr_shi = [ <!--创建一个二维数组，最外层每一个元素对应省-->
			    ["西安市", "咸阳市", "宝鸡市", "渭南市"], <!--数组中的第一个元素内又定义一个数组存的市的值-->
			    ["昆明市", "大理市", "丽江市", "西双版纳市"],
			    ["乐山市", "成都市", "大同市", "高新市"],
			    ["太原市", "屏显市", "乐宝市", "李伟市"]
			];
			
			var arr_xian = [ <!--创建一个三维数组，最外层每一个元素（对应省）-->
			    [ <!--数组中定义四个数组（对应市）-->
			        ["西安县1", "西安县2"],
			        ["咸阳市1", "咸阳市2"],
			        ["宝鸡市1", "宝鸡市2"],
			        ["渭南市1", "渭南市2"]
			    ], <!--数组中定义两个元素（对应县）-->
			    [
			        ["昆明市1", "昆明市2"],
			        ["大理市1", "大理市2"],
			        ["丽江市1", "丽江市2"],
			        ["西双版纳市1", "西双版纳市2"]
			    ],
			    [
			        ["乐山市1", "乐山市2"],
			        ["成都市1", "成都市2"],
			        ["大同市1", "大同市2"],
			        ["高新市1", "高新市2"]
			    ],
			    [
			        ["太原市1", "太原市2"],
			        ["屏显市1", "屏显市2"],
			        ["乐宝市1", "乐宝市2"],
			        ["李伟市1", "李伟市2"]
			    ]
			];
			var quanju_arr; //创建一个全局对象，用于存储一个中间数组
			function input_arr(arr, event) { //封装一个函数，用于向下拉栏中添加元素
			    for (var i = 0; i < arr.length; i++) { //下拉栏内的元素来源于数组中的元素，遍历数组
			        var option = new Option(arr[i], i); //创建Option对象（这个O要大写），存入值
			        event.appendChild(option); //把option添加到event对象的末尾
			    }
			}
			input_arr(arr_sheng, osheng); //调用,给省下拉栏添元素
			
			osheng.onchange = function() { //给下拉栏绑定事件（当下拉栏元素改变时执行）
			    oshi.options.length = 1; //当省下拉栏改变时，清空市的下拉栏内元素
			    oxian.options.length = 1; //当省下拉栏改变时，清空县的下拉栏内元素
			    var index = this.value; //每一个option标签都有一个value值索引，获取索引，用于数组中元素的选择
			    var arr_shi_next = arr_shi[index]; //获取当前选择省的市元素并赋给一个数组
			    quanju_arr = arr_xian[index]; //获取当前选择省中市的县元素并赋给定义的中间数组
			    input_arr(arr_shi_next, oshi); //调用,给市下拉栏添元素
			}
			oshi.onchange = function() {
			    oxian.options.length = 1;
			    var index = this.value;
			    var arr_xian_next = quanju_arr[index];
			    input_arr(arr_xian_next, oxian); //调用,给县下拉栏添元素
			}
		</script>
	</body>
</html>