Web---JavaScript---⑧DOM中select

最新推荐文章于 2019-08-08 12:09:05 发布

Whale-Song

最新推荐文章于 2019-08-08 12:09:05 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

分类专栏： ------③JavaScript 4.Web Web 文章标签： Web DOM select

本文链接：https://blog.youkuaiyun.com/qq_34928644/article/details/80972767

4.Web 同时被 3 个专栏收录

47 篇文章

订阅专栏

Web

37 篇文章

订阅专栏

------③JavaScript

10 篇文章

订阅专栏

本文提供了一个使用纯JavaScript实现的省市二级联动选择器示例。通过预先定义的省份和对应城市的JSON数据，当用户选择省份时，相应城市会自动更新到第二个下拉列表中。此示例适用于网页表单中需要用户选择地区场景。

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

select对象省份-->城市二级联动实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function changeCity( oSelectNode ){
				var jsonCitys={
					"none":[
						{"value":"none","text":"请选择"}
					],
					"beiJing":[
						{"value":"chaoYang","text":"朝阳区"},
						{"value":"haiDian","text":"海淀区"},
						{"value":"dongCheng","text":"东城区"},
						{"value":"xiCheng","text":"西城区"}
					],
					"huNan":[
						{"value":"yiYang","text":"益阳"},
						{"value":"changSha","text":"长沙"},
						{"value":"zhuZhou","text":"株洲"},
						{"value":"changDe","text":"常德"}
					],
					"fuJian":[
						{"value":"puTian","text":"莆田"},
						{"value":"fuZhou","text":"福州"},
						{"value":"xiaMen","text":"厦门"},
						{"value":"quanZhou","text":"泉州"}
					]
				};
				var arrCitys = jsonCitys[oSelectNode.value];
				var oSelectCity = document.getElementsByName("selCity")[0];
				oSelectCity.innerHTML ="<option value='none'>请选择</option>";
				for ( x in arrCitys ) {
					oSelectCity.innerHTML += "<option value='"+ arrCitys[x]["value"] +"'>"+arrCitys[x]["text"]+"</option>"
				}
			}
			
			function change( oSelectNode ){
				alert( oSelectNode.value );
			}
		</script>
	</head>
	<body>
		省份<select name="selProv" onchange="changeCity(this);">
			<option value="none">请选择</option>
			<option value="beiJing">北京</option>
			<option value="huNan">湖南</option>
			<option value="fuJian">福建</option>
		</select>
		城市<select name="selCity" onchange="change(this);">
			<option value="none">请选择</option>
		</select>
	</body>
</html>