jquery编写简单三级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<select id="province" onchange="provinceSelect(this);"></select>
		<select id="city" onchange="citySelect(this);"></select>
		<select id="region"></select>
	</body>
	<script src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		var list1 = new Array(2);
		list1["湖北省"] = ["武汉市", "襄阳市"];
		list1["湖南省"] = ["长沙市", "株洲市"];
		list1["湖北省"]["武汉市"] = ["洪山区", "江夏区", "武昌区", "汉口区"];
		list1["湖北省"]["襄阳市"] = ["樊城区", "襄城区"];
		list1["湖南省"]["长沙市"] = ["芙蓉区", "天心区"];
		list1["湖南省"]["株洲市"] = ["天元区", "芦淞区"];
		$(function() {
			var pp = '<option value="请选择省份">请选择省份</option>';
			$("#province").append(pp);
			for(var l in list1) {
				$("#province").append('<option value="' + l + '">' + l + '</option>');
			}
		});
		function provinceSelect(p) {
			//清空城市和区域
			$("#city").empty();
			$("#region").empty();
			var pp = '<option value="请选择城市">请选择城市</option>';
			$("#city").append(pp);
			//获取省份名称
			var pp = $(p).val();
			//根据省份名称 遍历二维数组
			for(var i = 0; i < list1[pp].length; i++) {
				$("#city").append('<option value="' + list1[pp][i] + '">' + list1[pp][i] + '</option>');
			}
		}
		function citySelect(c) {
			//清空区域
			$("#region").empty();
			var pp = '<option value="请选择区县">请选择区县</option>';
			$("#region").append(pp);
			//获取省份
			var pp = $("#province").val();
			//获取城市
			var cc = $(c).val();
			////根据省份和城市名称 遍历三维数组
			for(var i = 0; i < list1[pp][cc].length; i++) {
				$("#region").append('<option value="' + list1[pp][cc][i] + '">' + list1[pp][cc][i] + '</option>');
			}
		}
	</script>


</html>
jquery编写简单三级联动

猜你喜欢
