萌新笔记：HTML与JS实现省市二级联动

最新推荐文章于 2023-05-27 21:26:14 发布

听说拔了呆毛会黑化

最新推荐文章于 2023-05-27 21:26:14 发布

阅读量435

点赞数

本文链接：https://blog.csdn.net/weixin_43322280/article/details/88649477

版权

Java学习笔记同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

html学习当中遇到个省市二级联动案例，记个笔记方便复习，适合萌新，也欢迎大佬指点。以下是代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市二级联动</title>
		<script>
			//2.建立一个二维数组联系省市
			var City = Array(2);
			City[0] = Array("兰州市", "天水市", "庆阳市", "白银市");
			City[1] = Array("西安市", "汉中市", "延安市", "咸阳市");
			
			function changeProvince(v){
				
				//9.获取市选择select标签中的内容
				var selectElement = document.getElementById("city");
				//11.每次获取到的select标签中的内容后预先清空标签
				selectElement.length = 0;
				
				//3.循环遍历数组第一维找出对应省
				for (var i = 0; i < City.length; i++) {
					//4.判断：如果省对应的值v等于City数组的一维下标，则遍历对应下标下的第二维内容，即市信息
					if (v == i) {
						//5.遍历数组第二维
						for (var j = 0; j < City[i].length; j++) {
							//6.创建一个City文本节点
							var cityText = document.createTextNode(City[i][j]);
							//7.创建一个option元素节点
							var optionElement = document.createElement("option");
							//8。将cityText文本节点添加到optionElement元素节点中
							optionElement.appendChild(cityText);
							
							//10.将optionElement元素节点添加到市选择select节点中
							selectElement.appendChild(optionElement);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<!--1.选择事件为onchange-->
		<select onchange="changeProvince(this.value)">
			<option>--请选择--</option>
			<option value="0">甘肃省</option>
			<option value="1">陕西省</option>
		</select>
		<select id="city">
			<option>--------</option>
		</select>
		
	</body>
</html>

JQuery 写法(1.8.3版本)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市二级联动</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function (){
				
				//2.建立省市二维数组
				var cities = new Array(2);
				cities[0] = new Array("兰州市", "敦煌市", "天水市", "白银市");
				cities[1] = new Array("西安市", "延安市", "咸阳市", "汉中市");
				
				//1.选择事件
				$("#province").change(function(){
					//10.每次事件开始先清空城市所在的select标签内容
					$("#city").empty();
					
					//4.获取option元素中省份对应的value
					var proVal = this.value;
					
/*					//3.遍历数组
					$(cities).each(function(i){
						$(cities[i]).each(function(j){
							
							//5.判断省份，对号入座
							if (proVal == i) {
								
							//6.创建一个城市文本节点
							var cityText = document.createTextNode(cities[i][j]);
							
							//7.创建一个option元素节点
							var optEle = document.createElement("option");
								
							//8.将文本节点插入元素节点
							$(optEle).append(cityText);
							
							//9.将option元素节点插入select父元素节点
							$("#city").append(optEle);
							}
						});
						
					});*/
					
					//3.遍历数组，用$.each(object, [callback])结构遍历
					
					$.each(cities, function(i, m){
						$.each(cities[i], function(j, n){
							
							//5.判断省份，对号入座
							if (proVal == i) {
								
							//6.创建一个城市文本节点
							var cityText = document.createTextNode(n);
							
							//7.创建一个option元素节点
							var optEle = document.createElement("option");
								
							//8.将文本节点插入元素节点
							$(optEle).append(cityText);
							
							//9.将option元素节点插入select父元素节点
							$("#city").append(optEle);
							}
						});
						
					});
					
				});
				
				
			});
		</script>
	</head>
	<body>
		<form>
			<select id="province">
				<option>--请选择--</option>
				<option value="0">甘肃省</option>
				<option value="1">西安省</option>
			</select>
			<select id="city">
				<option>------</option>
			</select>
		</form>
	</body>
</html>

注：each()与$.each()区别见链接：https://blog.csdn.net/weixin_43322280/article/details/88738027