使用Jquery，完成连动下拉列表

最新推荐文章于 2025-11-06 09:53:10 发布

原创最新推荐文章于 2025-11-06 09:53:10 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

javaWeb 专栏收录该内容

33 篇文章

订阅专栏

该博客展示了如何使用jQuery动态地更新二级下拉列表的内容。当用户在省的下拉列表中选择一个选项时，市的下拉列表会根据所选省的数据自动填充对应的市。代码中定义了一个二维数组来存储省份和对应城市的关联数据，并在省选择改变时触发事件，清空市的选项并重新填充。这个功能常用于地区选择等场景，提高了用户体验。

使用Jquery，完成连动下拉列表

代码展示：

<!doctype html>
<html lang="en">
 <head>
  <title>Document</title>
  	<!--导入Jquery库-->
  	<script src="jquery-3.2.1.js"></script>
  	<script>
		$(function(){
		var area=[
			["哈尔滨","齐齐哈尔","大庆"],
			["沈阳","大连","铁岭","鞍山","锦州"],
			["长春","吉林"],
			["济南","青岛"]
		];
		$("#p").change(function(){
			$("#c").empty();//每次选择省后，将原来的市清空
			var value=$("#p").val();
			var arr=area[value];//获取数则中的元素
			for(var i=0 ;i<arr.length; i++){
				var option=new Option();//创建市下拉列表中的option
				option.text=arr[i];
				$("#c")[0].add(option);//得到js对象，把option加进去
			}
		});
	});
	</script>
 </head>
 <body>
	<select id="p" style="width:100px">
		<option>请选择</option>
		<option value="0">黑龙江</option>
		<option value="1">辽宁</option>
		<option value="2">吉林</option>
		<option value="3">山东</option>
	</select>省
	<select id="c" style="width:100px">
		<option>请选择</option>
	</select>市
 </body>
</html>

运行效果：