前端练习题——省市联动（数组存储）

最新推荐文章于 2023-06-25 21:45:57 发布

陈年_H

最新推荐文章于 2023-06-25 21:45:57 发布

阅读量248

点赞数

分类专栏：练习题文章标签：索引 js jquery javascript

本文链接：https://blog.csdn.net/Today_He/article/details/108837500

版权

练习题专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市联动</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				var provinces = ["四川","北京"];
				var citys = [["成都","遂宁","自贡","乐山"],["东城","西城","朝阳","海淀","丰台"]];
				//添加省份
				for(var i in provinces){
					var newNode = "<option value='"+(i*1+1*1)+"'>"+provinces[i]+"</option>";
					$("#province").append(newNode);
				}
				//改变了省份的选取，得到对应的市区
				$("#province").change(function(){
					//移除之前获得的市区（避免重复和不匹配省份）
					$("#city option:gt(0)").remove();
					//得到省份的value，它就是索引，对应二维数组中的一维数组（比如省份中的0索引，对应市区的二维数组中的第一个数组）
					var index = $(this).val() - 1;//第一个请选择不算
					for(var j=0;j<citys[index].length;j++){
						$("#city").append("<option value='"+(j*1+1*1)+"'>"+citys[index][j]+"</option>");
					}
				});
			});
		</script>
	</head>
	<body>
		<select id="province">
			<option value="0">--请选择--</option>
		</select>省
		<select id="city">
			<option value="0">--请选择--</option>
		</select>市/区
	</body>
</html>

陈年_H

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端练习题——省市联动（数组存储）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>省市联动</title> <script type="text/javascript" src="js/jquery-3.5.1.js" ></script> <script type="text/javascript"> $(function(){
复制链接

扫一扫