jQuery-----三级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="sheng" onchange="selectSheng(this);"></select>
		<select id="city" onchange="selectCity(this);"></select>
		<select id="qu"></select>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script>
		var lis = new Array(2);
		lis["湖北省"] = ["武汉市", "襄樊市"];
		lis["湖南省"] = ["长沙市", "浏阳市"];
		lis["湖北省"]["武汉市"] = ["洪山区", "江夏区", "武昌区", "汉口区"];
		lis["湖北省"]["襄樊市"] = ["樊城区", "襄城区"];
		lis["湖南省"]["长沙市"] = ["厂区", "杀区"];
		lis["湖南省"]["浏阳市"] = ["溜区", "羊区"];

		$(function() {
			var ss = '<option value="请选择省份">请选择省份</option>';
			$("#sheng").append(ss);
			for(var l in lis) {
				$("#sheng").append('<option value="' + l + '">' + l + '</option>')
			}
		});

		function selectSheng(p) {
			//清空城市和区域
			$("#city").empty();
			$("#qu").empty();
			var ss = '<option value="请选择城市">请选择城市</option>';
			$("#city").append(ss);
			//获取省份名称
			var pp = $(p).val();
			//根据省份名称 遍历二维数组
			for(var i = 0; i < lis[pp].length; i++) {
				$("#city").append('<option value="' + lis[pp][i] + '">' + lis[pp][i] + '</option>');
			}
		}

		function selectCity(c) {
			//清空区域
			$("#qu").empty();
			//获取省份
			var pp = $("#sheng").val();
			//获取城市
			var cc = $(c).val();
			//根据城市和省份名称 遍历三维数组
			for(var i = 0; i < lis[pp][cc].length; i++) {
				$("#qu").append('<option value="' + lis[pp][cc][i] + '">' + lis[pp][cc][i] + '</option>');
			}
		}
	</script>
</html>
jQuery-----三级联动

猜你喜欢
