jQuery之省市联动

最新推荐文章于 2022-11-29 09:41:34 发布

故里有长安、

最新推荐文章于 2022-11-29 09:41:34 发布

阅读量343

点赞数 1

分类专栏：前端文章标签： jQuery 省市联动

本文链接：https://blog.csdn.net/x_l_t/article/details/102664194

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>省市联动</title>
	</head>
	<body>
		<select name="provice" id="pro">
			<option value="">---请选择---</option>
		</select>
		<select name="city" id="city">
			<option value="">---请选择---</option>
		</select>
	</body>
	<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		var pros = ["河南省","河北省","山东省","江苏省"];
		var citys = [
			["濮阳市", "洛阳市", "安阳市", "信阳市", "南阳市"],
			["石家庄市", "唐山市", "保定市", "邯郸市", "秦皇岛市"],
			["济南市", "青岛市", "烟台市", "日照市", "淄博市"],
			["苏州市", "南京市", "无锡市", "常州市", "盐城市"]
		];
		
		//遍历省份数组，填充省份的下拉选择框内容
		$(pros).each(function(index){
			$("#pro").append($("<option value='" + index + "'>" + this + "</option>"));
			
		})
		//在省份发生变化时，获取到点击省份的value下标值，得到对应的市区数组，填充市区的下拉选择框
		$("#pro").change(function(){
			//先清空之前的市区数据，再添加新的省份市区
			$("#city option").remove(":gt(0)");
			//获取市区数组
			var cs = citys[$(this).val()];
			$(cs).each(function(index){
				$("#city").append($("<option value='" + index + "'>" + this + "</option>"));
			})
		})
		
	</script>
</html>

showtime：
在这里插入图片描述

故里有长安、

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery之省市联动

代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>省市联动</title> </head> <body> <select name="provice" id="pro"> <optio...
复制链接

扫一扫

专栏目录