【JavaScript】全国城市三级联动

最新推荐文章于 2020-12-06 03:52:44 发布

爱敲代码的大海

最新推荐文章于 2020-12-06 03:52:44 发布

阅读量433

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/qq9108780/article/details/75077778

版权

JavaScript学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三级城市联动</title>
		<script src="js/prototype.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script type="text/javascript">
			var shengData=	[
								['湖南省','hn'],
								['广东省','gd'],
								['北京市','bj'],
								['河北省','hb']
							];
		
			var cityDate=new Array;
				cityDate[1]=[
								['衡阳市','hys'],
								['怀化市','hhs'],
								['岳阳市','yys']
							];
				cityDate[2]=[
								['广州市','gzs'],
								['东莞市','dgs']
							];
				cityDate[3]=[
								['朝阳区','zyq'],
								['北京市','bjs']
							];
			
			var xianDate=new Array;
			xianDate[1]=[
						[['衡南县','hnx'],['衡东县','hdx']],
						[['怀化一县','hnx'],['怀化二县','hdx']],
						[['岳阳一县','hnx'],['岳阳二县','hdx'],['岳阳三县','hdx']]
					];
			xianDate[2]=[
						[['广东一县','hnx'],['广东二县','hdx']],
						[['东莞一县','hnx'],['东莞二县','hdx'],['东莞三县','hdx']]
					];
			xianDate[3]=[
						[['朝阳一县','hnx'],['朝阳二县','hdx'],['朝阳三县','hdx']]
					];
				
				
			function setshi() {
				var shengid=$('sheng').selectedIndex;
				$('shi').length=1;
				$('xian').length=1;
				for (var i = 0; i < cityDate[shengid].length; i++) {
					$('shi').options.add(new Option(cityDate[shengid][i][0],cityDate[shengid][i][1]));
				}
			}
			function setxian() {
				var shengid=$('sheng').selectedIndex;
				var shiid=$('shi').selectedIndex;
				$('xian').length=1;
				for (var i = 0; i < xianDate[shengid].length; i++) {
					$('xian').options.add(new Option(xianDate[shengid][shiid-1][i][0],xianDate[shengid][shiid-1][i][1]));
				}
			}
		</script>
	</head>
	<body>
		<div class="container text-center">
			<div class="panel panel-default">
				<div class="panel-body" style="font-size: 25px;font-weight: bold;">
					全国城市三级联动
				</div>
			</div>
			<form class="form-inline">
				<select class="form-control" id="sheng" οnchange="setshi();">
					<option>--选择省份--</option>
				</select>
				<select class="form-control" id="shi" οnchange="setxian()">
					<option>--地级市--</option>
				</select>
				<select class="form-control" id="xian">
					<option>--市、县级市--</option>
				</select>
			</form>
		</div>
		
		<script type="text/javascript">
			for (var s=0; s<shengData.length; s++) {
				$('sheng').options.add(new Option(shengData[s][0],shengData[s][1]));
			}
		</script>
	</body>
</html>

prototype.js这个js框架得加上，bootstrap.min.css这个是CSS样式，可加可不加