省市联动代码

最新推荐文章于 2024-05-21 14:15:14 发布

吃可爱长大的.

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量100

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_66508993/article/details/129566796

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>省市区联动菜单</title>
		<script src="../js/jquery.js"></script>
		<script>
			var prvo = [
				"山西", "四川"
			];
			var cit = [
				["太原市", "吕梁市", "临汾市", "运城市", "阳泉市"],
				["成都市", "绵阳市", "雅安市", "乐山市", "眉山市"]
			];
			var dis = [
				[
					["小店区", "迎泽区"],
					["吕梁1", "吕梁2"],
					["临汾1", "临汾2"],
					["运城1", "运城2"],
					["阳泉1", "阳泉2"]
				],
				[
					["成都1", "成都2"],
			 	["绵阳1", "绵阳2"],
					["雅安1", "雅安2"],
					["乐山1", "乐山2"],
					["眉山1", "眉山2"]
				]
			]
			$(function() {
				//初始化省份
				for (var i = 0; i < prvo.length; i++) {
					//每次循环加一个option标签
					$("#prvoince").append("<option>" + prvo[i] + "</option>")
				}
				//---on---在选择元素上绑定一个或多个事件的事件处理函数
				//加入change事件使在省发生改变时 发生改变
				$("#prvoince").on('change', function() {
					//清除元素,将上一次选择的内容清除掉,开始新一轮的选择
					//$('#city').empty()
					$('#city').text(' ');
					$('#district').text(' ');
					//利用选择器中的  :selected  方法匹配到所有的元素,然后再用index方法获得下标
					//得到被选中省份的下标
					var proIndex = $("#prvoince option:selected").index();
					var citys = cit[proIndex - 1]
					for (var i = 0; i < citys.length; i++) {
			  	$("#city").append("<option>" + citys[i] + "</option>")
						//[this.value]
					}
				})
				$("#city").on('change', function() {
					$("#district").empty()
					var proIndex = $("#prvoince option:selected").index();
					var citIndex = $("#city option:selected").index()
					var distr = dis[proIndex - 1][citIndex]
					for (var i = 0; i < distr.length; i++) {
						$("#district").append("<option>" + distr[i] + "</option>")
					}
				})
			})
		</script>
	</head>
	<body>
		<span style="font-size: 30px;font-weight: 500px;">城市选择：</span>
		<!--选择省-->
		<select id="prvoince">
			<option>--请选择省份--</option>
		</select>
		<!--选择市-->
		<select id="city">
			<option>--请选择城市--</option>
		</select>
		<select id="district">
			<option>--请选择区--</option>
		</select>
	</body>
</html>