省市联动2

最新推荐文章于 2019-11-23 22:11:04 发布

Fw·白

最新推荐文章于 2019-11-23 22:11:04 发布

阅读量70

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45189658/article/details/103219317

版权

JavaScript 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

这次先将option中填入省就会显得十分的简单，方便。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="sheng" onchange="getShi()">
			<option value="1">山东省</option>
			<option value="2">湖南省</option>
			<option value="3">安徽省</option>
		</select>
		<select name="shi"></select>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function getShi(){
			//获取下拉列表中value的值
			var n=$("[name='sheng']").val();
			//获取shi的对象
			var shi=$("[name='shi']");
			switch(n){
				case '1':
					shi.empty();
					shi.append("<option value='11'>青岛市</option>");
					shi.append("<option value='12'>日照市</option>");
					shi.append("<option value='13'>济南市</option>");
					shi.append("<option value='14'>烟台市</option>");
				break;
				case '2':
					shi.empty();
					shi.append("<option value='21'>长沙市</option>");
					shi.append("<option value='22'>珠洲市</option>");
					shi.append("<option value='23'>湘潭市</option>");
					shi.append("<option value='24'>岳阳市</option>");			
				break;
				case '3':
					shi.empty();
					shi.append("<option value='31'>合肥市</option>");
					shi.append("<option value='32'>芜湖市</option>");
					shi.append("<option value='33'>安庆市</option>");
				break;
			}			
		}
		
		$(function(){
			getShi();
		})
	</script>
</html>

Fw·白

关注

0
点赞
踩
0

收藏

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

这次先将option中填入省就会显得十分的简单，方便。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <select name="sheng" oncha...
复制链接

扫一扫

专栏目录