三级联动效果

Posted 最骚的就是你

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三级联动效果相关的知识，希望对你有一定的参考价值。

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			var cityList = new Array();
			var quList = new Array();
			cityList[‘北京‘] = [‘北京‘];
			cityList[‘浙江‘] = [‘杭州市‘, ‘温州市‘, ‘金华市‘, ‘临安市‘];
			cityList[‘陕西‘] = [‘西安‘, ‘宝鸡‘, ‘咸阳‘];
			cityList[‘甘肃‘] = [‘兰州市‘, ‘武威市‘, ‘酒泉市‘, ‘张掖市‘];

			quList[‘北京‘] = [‘1区‘, ‘2区‘, ‘3区‘, ‘4区‘];
			quList[‘杭州市‘] = [‘5区‘, ‘6区‘, ‘7区‘, ‘8区‘];
			quList[‘温州市‘] = [‘9区‘, ‘10区‘, ‘11区‘, ‘12区‘];
			quList[‘西安‘] = [‘13区‘, ‘14区‘, ‘15区‘, ‘16区‘];
			quList[‘宝鸡‘] = [‘17区‘, ‘18区‘, ‘19区‘, ‘20区‘];
			quList[‘兰州市‘] = [‘21区‘, ‘22区‘, ‘23区‘, ‘24区‘];

			window.onload = allData;

			function allData() {
				var shengfen = document.getElementById(‘shengfen‘);
				for(var sf in cityList) {
					shengfen.add(new Option(sf, sf));
				}

			}

			function changeCity() {

				var chengshi = document.getElementById(‘chengshi‘);
				var sheng = document.getElementById(‘shengfen‘).value;

				chengshi.options.length = 1;
				for(var cs in cityList[sheng]) {
					chengshi.add(new Option(cityList[sheng][cs], cityList[sheng][cs]));

				}
			}

			function changequ() {
				var shiqu = document.getElementById(‘shiqu‘);
				var cheng = document.getElementById(‘chengshi‘).value;
				shiqu.options.length = 1;
				for(var sh in quList[cheng]) {

					shiqu.add(new Option(quList[cheng][sh], quList[cheng][sh]));

				}

			}
		</script>
	</head>

	<body>
		<br />

		<select id="shengfen" style="width:100px" onchange="changeCity()">
			<option>--选择省份--</option>

		</select>
		<select id="chengshi" style="width:100px" onchange="changequ()">
			<option>--选择城市--</option>

		</select>
		<select id="shiqu" style="width:100px">
			<option>--选择区县--</option>

		</select>

	</body>

</html>

　　

以上是关于三级联动效果的主要内容，如果未能解决你的问题，请参考以下文章

AjaxPHPmysql实现城市的三级联动

ajax省市区三级联动

三级联动效果

Ajax来实现下拉框省市区三级联动效果（服务端基于express）

三级联动效果

Vue如何使用vue-area-linkage实现地址三级联动效果