省市二级联动

最新推荐文章于 2024-05-15 00:08:07 发布

像极了夏洛特

最新推荐文章于 2024-05-15 00:08:07 发布

阅读量149

点赞数

分类专栏： web基础文章标签：省市二级联动二维数组

本文链接：https://blog.csdn.net/D_BBY/article/details/100165342

版权

web基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

需要了解二维数组相关知识。
接下来直接展示代码，有详细注释：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市二级联动</title>
		<script type="text/javascript">
			//二维数组,通过value值知道 接下来选择那个省的城市
			function selectCity(value){
				var citys = [
					["海淀","昌平","朝阳"],
					["郑州","洛阳","开封"],
					["沈阳","大连","鞍山"]
				];
				//取出二维数组中的 其中一个一维数组
				var city = citys[value];
				//通过id获取位置
				var cityId = document.getElementById("cityId");
				//将获得的市拼接成一个字符串
				var str = "<option>----请选择市----</option>";
				//遍历一维数组
				for (var i = 0; i < city.length; i++) {
					str += "<option>----"+city[i]+"----</option>";
				}
				//将拼接好的字符串进行识别并显示
				cityId.innerHTML = str;
			}
		</script>
	</head>
	<body>
					<table width="600" height="350px">
						<tr>
							<td align="right">所在地</td>
							<td colspan="3">
								<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
									<option value="">----请选择省----</option>
									<option value="0">北京</option>
									<option value="1">河南</option>
									<option value="2">江苏</option>
								</select>
								<select id="cityId" style="width:150px">
									<option value="">----请选择市----</option>
								</select>

							</td>
						</tr>
					</table>
	</body>
</html>

效果截图：

像极了夏洛特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市二级联动

需要了解二维数组相关知识。接下来直接展示代码，有详细注释：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>省市二级联动</title> <script type="text/javascript"> //二维数组,通过v...
复制链接

扫一扫