三级联动效果

<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>

  参考链接:http://www.cnblogs.com/zjfree/archive/2011/11/30/2269342.html

 

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		省:
		<select style="width: 100px;" id="pre" onchange="chg(this);">
			<option value="-1">请选择</option>
		</select>
		市:
		<select style="width: 100px;" id="city" onchange="chg2(this);"></select>
		区:
		<select style="width: 100px;" id="area"></select>
	</body>
	<script>
		//声明省
		var pres = ["北京", "上海", "山东"]; //直接声明Array
		//声明市
		var cities = [
			["东城", "昌平", "海淀"],
			["浦东", "高区"],
			["济南", "青岛"]
		];
		var areas = [
				[
					["东城1", "东城2", "东城3"],
					["昌平1", "昌平2", "昌平3"],
					["海淀1", "海淀2", "海淀3"]
				],
				[
					["浦东1", "浦东2", "浦东3"],
					["高区1", "高区2", "高区3"]
				],
				[
					["济南1", "济南2"],
					["青岛1", "青岛2"]
				]
			]
			//设置一个省的公共下标
		var pIndex = -1;
		var preEle = document.getElementById("pre");
		var cityEle = document.getElementById("city");
		var areaEle = document.getElementById("area");
		//先设置省的值
		for(var i = 0; i < pres.length; i++) {
			//声明option.<option value="i">pres[i]</option>
			var op = new Option(pres[i], i);
			//添加
			preEle.options.add(op);
		}

		function chg(obj) {
			if(obj.value == -1) {
				cityEle.options.length = 0;
				areaEle.options.length = 0;
				return true;
			}
			//获取值
			var val = obj.value;
			pIndex = obj.value;
			//获取ctiry
			var cs = cities[val];
			//获取默认区
			var as = areas[val][0];
			//先清空市
			cityEle.options.length = 0;
			areaEle.options.length = 0;
			for(var i = 0; i < cs.length; i++) {
				var op = new Option(cs[i], i);
				cityEle.options.add(op);
			}
			for(var i = 0; i < as.length; i++) {
				var op = new Option(as[i], i);
				areaEle.options.add(op);
			}
		}

		function chg2(obj) {
			var val = obj.selectedIndex;
			var as = areas[pIndex][val];
			areaEle.options.length = 0;
			for(var i = 0; i < as.length; i++) {
				var op = new Option(as[i], i);
				areaEle.options.add(op);
			}
		}
	</script>

</html>

  

posted @ 2016-09-21 23:54  最骚的就是你  阅读(277)  评论(0编辑  收藏  举报