javascript之城市联动

最新推荐文章于 2023-03-29 10:00:04 发布

原创最新推荐文章于 2023-03-29 10:00:04 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

javaScript 专栏收录该内容

10 篇文章

订阅专栏

本文展示了如何使用JavaScript实现根据省份选择动态加载对应城市的联动下拉菜单功能。通过监听省份select的onChange事件，根据用户选择的省份更新城市select的内容，实现了数据的动态绑定。

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

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省份<select id="province" onchange="showCity()">
		    		<option>省份</option>
		    		<option>辽宁</option>
		            <option>吉林</option>
		            <option>黑龙江</option>
		    	</select>
		城市<select id="city"><option>城市</option></select>
		
		<script>
		    function showCity(){
				//构造城市
				var citys = [[],["沈阳","大连","本溪"],["长春","四平","延边"],["哈尔滨","佳木斯","齐齐哈尔"]];
			    //获取省份
				var province = document.getElementById("province");
			    //获取下标
				var selectIndex = province.selectedIndex;//获取下标
			    //获取城市
				var city = document.getElementById("city");
				//获取这个省所对应的城市集合
				var cityDatas = citys[selectIndex]
				//清空上一次城市
				city.options.length = 1;
				//循环遍历城市集合
				for(var i=0;i<cityDatas.length;i++){
					//创建option标签对象
					var optionNode = document.createElement("option");
					//向option标签中添加文本
					optionNode.innerHTML=cityDatas[i];
					//将option标签追加到select标签中
					city.appendChild(optionNode);
				}
			}
		</script>
	</body>
</html>