jQuery 中的省级联动原理易懂极其简单（年月日为例）

最新推荐文章于 2019-05-18 11:42:49 发布

YKenan

最新推荐文章于 2019-05-18 11:42:49 发布

阅读量286

点赞数 1

分类专栏：前端文章标签： jQuery 省级联动

本文链接：https://blog.csdn.net/YKenan/article/details/88935035

版权

前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

jQuery 中的省级联动原理易懂极其简单（年月日为例）

省：一维数组

市：二维数组

乡：三维数组

例子：

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="keywords" content="jQuery, 省级联动" />
		<title>jQuery 中的 省级联动  原理易懂 极其简单</title>
	</head>

	<body>
		<select id="selProvince">
			<option>--请选择--</option>
		</select>
		<select id="selCity">
			<option>--请选择--</option>
		</select>
		<select id="selCountryside">
			<option>--请选择--</option>
		</select>
		
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script>
			var month = new Array();
			for(var i = 0; i <= 11; i++) {
				month[i] = (i + 1).toString();
			}
			var typeOne = new Array();
			for(var i = 0; i <= 27; i++) {
				typeOne[i] = (i + 1).toString();
			}
			var typeTwo = new Array();
			for(var i = 0; i <= 28; i++) {
				typeTwo[i] = (i + 1).toString();
			}
			var typeThree = new Array();
			for(var i = 0; i <= 29; i++) {
				typeThree[i] = (i + 1).toString();
			}
			var typeFour = new Array();
			for(var i = 0; i <= 30; i++) {
				typeFour[i] = (i + 1).toString();
			}
			
			//省
			var provinceYear = ["2019", "2020", "2021", "2022", "2023"];
			
			//市
			var cityMonth = new Array(5);
			for(var i = 0; i < 5; i++) {
				cityMonth[i] = month;
			}
			
			//村
			var countrysideDay = new Array(5);

			for(var i = 0; i < 5; i++) {
				countrysideDay[i] = new Array(12);
				for(var j = 0; j < 12; j++) {
					switch(j) {
						case 1:
							if(parseInt(provinceYear[i]) % 100 != 0 && parseInt(provinceYear[i]) % 4 == 0) {
								countrysideDay[i][j] = typeTwo
							} else {
								countrysideDay[i][j] = typeOne
							}
							break;
						case 3:
						case 5:
						case 8:
						case 10:
							countrysideDay[i][j] = typeThree
							break;
						default:
							countrysideDay[i][j] = typeFour
							break;
					}
				}
			}
			
			for(var i = 0; i < provinceYear.length; i++) {
				$("#selProvince").append("<option>" + provinceYear[i] + "</option>");
			}
			//根据省遍历市
			$("#selProvince").change(function() { //点击xx省的时候触发时事件
				$("#selCity").children("option").not(":eq(0)").remove(); //清空市
				$("#selCountryside").children("option").not(":eq(0)").remove(); //清空县
				indexProvinceCity = parseInt($(this).children("option:selected").index()); //获取省索引
				if(indexProvinceCity > 0) {
					var city = cityMonth[indexProvinceCity - 1]; //让市的索引从 当前省的索引-1开始遍历
					for(var j = 0; j < city.length; j++) {
						$("#selCity").append("<option>" + city[j] + "</option>");
					}
				}
			});
			//根据市遍历县
			$("#selCity").change(function() {
				$("#selCountryside").children("option").not(":eq(0)").remove(); //只需清除县，
				indexCityCountrysideDay = parseInt($(this).children("option:selected").index()); //获取市的索引
				if(indexCityCountrysideDay > 0) {
					var countryside = countrysideDay[indexProvinceCity - 1][indexCityCountrysideDay - 1]; //根据省找到市，在根据市找打县，再遍历
					for(var j = 0; j < countryside.length; j++) {
						$("#selCountryside").append("<option>" + countryside[j] + "</option>");
					}
				}
			});
		</script>
	</body>

</html>

YKenan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 中的省级联动原理易懂极其简单（年月日为例）

jQuery 中的省级联动原理易懂极其简单（年月日为例）省：一维数组市：二维数组乡：三维数组例子：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <me...
复制链接

扫一扫