jquery编写简单三级联动

ゞ浴缸里的玫瑰 2022-05-23 03:05 157阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<body>
    		<select id="province" οnchange="provinceSelect(this);"></select>
    		<select id="city" οnchange="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>