java-web js实现省市联动（使用元素节点，文本节点的方法）补：jquery的再次实现

最新推荐文章于 2021-02-28 13:02:58 发布

Peppa7Pig

最新推荐文章于 2021-02-28 13:02:58 发布

阅读量382

点赞数

本文链接：https://blog.csdn.net/qq_42072733/article/details/81034764

版权

实现步骤：

第一步：确定事件(onchange)并为其绑定一个函数

第二步：创建一个二维数组用于存储省份和城市

第三步：获取用户选择的省份

第四步：遍历二维数组中的省份

第五步：将遍历的省份与用户选择的省份比较

第六步：如果相同，遍历该省份下所有的城市

第七步：创建城市文本节点

第八步：创建option元素节点

第九步：将城市文本节点添加到option元素节点中去

第十步：获取第二个下拉列表，并将option元素节点添加进去

第十一步：每次操作前清空第二个下拉列表的option内容。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>二级联动</title>
		<!--<script type="text/javascript">
		var books=[["红楼梦","水浒传","西游记 "],["高数","大学英语","大学语文"]];
		function change(){
			var index=document.getElementById("main").selectedIndex;
			var str="";
			for(var i=0;i<books[index-1].length;i++){
				str += "<option>" + books[index-1][i] + "</option>";
			}
			document.getElementById("sub").innerHTML=str;
		}
		</script>-->
		<script>
			 //1.创建一个二维数组用于存储省份和城市
			var cities = new Array(3);
			cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
			cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
			cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
			cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");

			function changeCity(val) {
				//7.获取第二个下拉列表
				var cityEle = document.getElementById("city");
				//9.清空第二个下拉列表的option内容
				cityEle.options.length = 0;
				//2.遍历二维数组中的省份
				for (var i = 0; i < cities.length; i++) {
					//注意，比较的是角标
					if (val == i) {
						//3.遍历用户选择的省份下的城市
						for (var j = 0; j < cities[i].length; j++) {
							//alert(cities[i][j]);
							//4.创建城市的文本节点
							var textNode = document.createTextNode(cities[i][j]);
							//5.创建option元素节点
							var opEle = document.createElement("option");
							//6.将城市的文本节点添加到option元素节点
							opEle.appendChild(textNode);
							//8.将option元素节点添加到第二个下拉列表中去
							cityEle.appendChild(opEle);
						}
					}
				}
			}
		</script>
	</head>

	<body>
		<select onchange="changeCity(this.value)">
			<option>--请选择--</option>
			<option value="0">湖北</option>
			<option value="1">湖南</option>
			<option value="2">河北</option>
			<option value="3">河南</option>
		</select>
		<select id="city">

		</select>
	</body>

</html>

jquery的实现代码

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//2.创建二维数组用于存储省份和城市
				var cities = new Array(3);
				cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
				cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
				cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
				cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
				
				$("#province").change(function(){
					//10.清除第二个下拉列表的内容
					$("#city").empty();
					//1.获取用户选择的省份
					var val = this.value;
					//3.遍历二维数组中的省份
					$.each(cities,function(i,n){
//						*function(i,n)中i返回的是索引而n返回的是值
						//4.判断用户选择的省份和遍历的省份
						if(val==i){
							//5.遍历该省份下的所有城市
							$.each(cities[i], function(j,m) {
								//6.创建城市文本节点
								var textNode = document.createTextNode(m);
								//7.创建option元素节点
								var opEle = document.createElement("option");
								//8.将城市文本节点添加到option元素节点中去
								$(opEle).append(textNode);
								//9.将option元素节点追加到第二个下拉列表中去
								$(opEle).appendTo($("#city"));
							});
						}
					});
					
				});
			});
		</script>

Peppa7Pig

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
java-web js实现省市联动（使用元素节点，文本节点的方法）补：jquery的再次实现

实现步骤：第一步：确定事件(onchange)并为其绑定一个函数第二步：创建一个二维数组用于存储省份和城市第三步：获取用户选择的省份第四步：遍历二维数组中的省份第五步：将遍历的省份与用户选择的省份比较第六步：如果相同，遍历该省份下所有的城市第七步：创建城市文本节点第八步：创建option元素节点第九步：将城市文本节点添加到option元素节点中去第十步...
复制链接

扫一扫