js实现省市区三级联动

夜卜_

已于 2022-04-22 15:01:24 修改

阅读量797

点赞数

文章标签： javascript

于 2022-04-21 20:04:00 首次发布

本文链接：https://blog.csdn.net/m0_68334284/article/details/124330302

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body onload="getSheng()">
		<!--省要定义一个页面加载事件-->
		省：
		<select id="sheng" onchange="getShi()">
		</select>
		市：
		<select id="shi" onchange="getQu()">
		</select>
		省：
		<select id="qu">
		</select>
	</body>
	<script type="text/javascript">
		// 定义一个地区的二维数组
		var arr = [
			// 普通id 内容 父id
			[1, "陕西省", 0],
			[2, "山西省", 0],
			[3, "河南省", 0],
			[8, "山东省", 0],

			// 西安市的父id = 陕西省的id
			[4, "西安市", 1],
			[5, "咸阳市", 1],

			// 未央区的父id = 西安市的id
			[9, "未央区", 4],
			// 盐湖区的父id = 运城市的id
			[10, "盐湖区", 6],
			[11, "秦都区", 5],

			// 运城市的父id = 山西省的id
			[6, "运城市", 2],

			// 洛阳市的父id = 河南省的id
			[7, "洛阳市", 3]
		];

		// 获取省
		function getSheng() {

			//初始化三个下拉框内容
			//获取省份下拉框
			var sheng = document.getElementById("sheng");
			var str = "<option value='-1'>----请选择省----</option>";
			// 获取市区下拉框
			var shi = document.getElementById("shi");
			// 初始化市区下拉框内容
			shi.innerHTML = "<option value='-1'>----请选择市----</option>";

			// 获取区县下拉框
			var qu = document.getElementById("qu");
			// 初始化县区下拉框内容
			qu.innerHTML = "<option value='-1'>----请选择区----</option>";

			for(var i = 0; i < arr.length; i++) {
				// 判断父id为0
				if(arr[i][2] == 0) {
					// 把普通id和内容拼接到字符串中
					str += "<option value='" + arr[i][0] + "'>" + arr[i][1] + "</option>";
				}
			}

			// 把js代码写入html页面
			sheng.innerHTML = str;
		}

		// 获取市
		function getShi() {
			// 定义一个字符串
			var str = "<option value='-1'>----请选择市----</option>";
			// 根据id获取市下拉列表框的对象
			var shi = document.getElementById("shi");
			// 获取区县下拉框
			var qu = document.getElementById("qu");
			// 初始化县区下拉框内容
			qu.innerHTML = "<option value='-1'>----请选择区----</option>";

			//根据id获取省的下拉框的value值
			var shengValue = document.getElementById("sheng").value;

			for(var i = 0; i < arr.length; i++) {
				// 根据市的父id == 省的id
				if(arr[i][2] == shengValue) {
					str += "<option value='" + arr[i][0] + "'>" + arr[i][1] + "</option>";
				}
			}

			//js代码写入html页面
			shi.innerHTML = str;
		}

		// 获取区
		function getQu() {
			// 定义一个字符串
			var str = "<option value='-1'>----请选择区----</option>";
			// 根据id获取区的对象
			var qu = document.getElementById("qu");
			// 根据id获取市的value值
			var shiValue = document.getElementById("shi").value;

			for(var i = 0; i < arr.length; i++) {
				if(arr[i][2] == shiValue) {
					str += "<option value='" + arr[i][0] + "'>" + arr[i][1] + "</option>";
				}
			}

			//js代码写入html页面
			qu.innerHTML = str;
		}
	</script>

</html>

简单的省市区三级联动，如有不足欢迎提出

夜卜_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js实现省市区三级联动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>省市区三级联动</title> <script type="text/javascript"> // 定义一个二维数组，第一个值存放value，第二个放下拉框内容，第三个是二级联动的关系 var arr = [ [1, "陕西省", 0], [2, "山西.
复制链接

扫一扫