html-省市联动JQ实现

最新推荐文章于 2021-06-05 02:24:46 发布

静安书以沫

最新推荐文章于 2021-06-05 02:24:46 发布

阅读量344

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/whatname123/article/details/110388357

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个HTML页面中的省市联动选择器实现，使用JavaScript动态加载根据省份选择的城市列表，展示了如何通过`jQuery`操作DOM并利用数组数据结构进行联动效果。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>省市联动</title>
	</head>

	<body>
		<select id="sheng">
			<option>请输入省份</option>
		</select>
		<select id="shi">
			<option>请输入城市</option>
		</select>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		var sheng = ["辽宁", "广东", "湖北"];
		var shi = [
			["沈阳", "盘锦", "营口", "本溪", "铁岭"],
			["广州", "佛山", "清远", "深圳"],
			["武汉", "十堰", "武昌"]
		];
		$(sheng).each(function(index,ele){
			$("select:first").append("<option value='"+index+"'>"+ele+"</option>")
		});
		$("select:first").change(function(){
			$("select:last option").remove(":gt(0)")//落下了冒号
//			$("#shi option").remove(":gt(0)");
			var i = $("select:first").val();
			$(shi[i]).each(function(index,ele){
				$("select:last").append($("<option>"+ele+"</option>"))
			})
		})
	</script>
</html>