jQuery实现下拉列表的二级联动

最新推荐文章于 2025-05-16 16:56:34 发布

小猴子豆芽菜

最新推荐文章于 2025-05-16 16:56:34 发布

阅读量919

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签：二级联动

本文链接：https://blog.youkuaiyun.com/XU906722/article/details/79316595

jQuery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用jQuery实现省市区的二级联动效果。通过创建一个存储城市数据的二维数组，并利用jQuery的事件处理及DOM操作方法，在用户选择省份时动态更新城市列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：选择省份时右侧自动变为相应省份下的城市列表
<!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>用jQuery实现下拉框的二级联动</title>
<script src="../../resource/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">

	$(function(){
		//1.创建一个二维数组用于存放城市
		var cities=new Array(3);
		cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
		cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
		cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
		cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
		
		$("#province").change(function() {
			//2.获取所选中的省份的下拉列表
			var index=this.value;
			
			//10.清空第二个列表
			$("#city").empty();
			
			//3.遍历二维数组
			$.each(cities, function(x, cityArr) {
				//4.判断遍历的省份和所选中的省份是否相同
				if(index==x){
					//5.遍历选中省份的城市列表
					$.each(cities[x], function(y, city) {
						//6.创建城市文本节点
						 var textNode=document.createTextNode(city);
						 //7.创建option节点
						 var optionNode=document.createElement("option");
						 //8.将城市文本节点添加到option节点中
						 $(optionNode).append(textNode);
						 //9.将option元素节点追加到第二个元素列表
						 $(optionNode).appendTo($("#city"));
					})
				}
			})
			
		})		
		
	})
	
	
</script>
</head>
<body>
	<table>
		<tr>
			<td>籍贯</td>
			<td><select id="province" 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></td>
	</table>
</body>

</html>