jquery实现多级联查

思路

升级：onchange（this）,传的就是选中的DOM对象，很好用，但是下面的实现没有用到

注意2：在清空select的option的时候，可以直接用innerHtml或html ，把empty和添加“请选择”用html（）代替

前端：

（都是用的bootstrap和jquery）
**第一级：** 在html写出select标签，然后访问后台的获取数据
然后js中添加`<option>`标签拼接数据
-----获取第一级的另一个方法：在后端的controller层中添加Model对象，把获取到的pojo集合放进model属性中，在jsp里 用c标签 循环添加
**第二级：** 在第一级中添加onchange=“ get第二级（） ”方法，也是js拼接`<option>标签`，<font color="red">一定要记得清空之前的`<option>`，不然会重复添加</font>
根据第一级的id获取第二级的数据，同样访问后台的数据
**第三级：** 同理，在第二级中添加方法。。。



**HTML:** 不用多说，只写写select标签，定义一个唯一的id
```html
<div class="form-group">
	<label for="deptName" style="">院系名</label><br /> 
		<select name="deptId" id="deptName" class="form-control"
			 onchange="getMajor()" style="width:200px;" >
			<option value="0">------请选择院系-----</option>
		</select>
</div>
<div class="form-group">
	<label for="majorName" style="">专业</label><br /> 
		<select style="width:200px;" name="majorId" id="majorName" class="form-control">
		<option value="0">------请选择专业-----</option>
		</select>
</div>
```

方法二：”用model存储的时候的，第一级html

<select name="province"  id="province">
           <option value="">------请选择院系-----</option>
           <c:forEach items="${province}" var="c1">
		<option value="${c1.pr_name}" οnclick="testJson1()">${c1.pr_name}</option>		
	    </c:forEach>
       </select>

联查肯定是动态实现的，肯定要用js
js: get第一级（）
```javascript
function getDept() {
//alert(“getDept”);
//$("#majorName").empty();

		$.ajax({
			url: "./getAllDept",
			type: "POST",
			dataType: "json",
			success: function(data) {
				if (data != null) {
					//	alert(data.status);
					$(data.data).each(function(index) {
						console.log(data.data[index].id);
						console.log(data.data[index].deptName);
						$("#deptName").append(
							'<option value="' + data.data[index].id + '">' + data.data[index].deptName + '</option>'
						);
					});
				}

			}
		});

	}

```
get第二级（）
```javascript
function getMajor() {
		//alert("Major");
		console.log("Major方法开始");
		console.log("开始清空Major");
		var em = $("#majorName option:selected").val();
		$("#majorName").empty();
		console.log("majorSelect:" + em);
		$("#majorName").append("<option value='' selected>" + '------请选择专业----' + "</option>");


		var deptId = $("#deptName option:selected").val();
		console.log("deptId:" + deptId);
		$.ajax({
			url: "./getMajorByDeptId/" + deptId,
			type: "POST",
			dataType: "json",
			success: function(data) {
				if (data != null) {
					//	alert(data.status);
					$(data.data).each(function(index) {
						console.log(data.data[index].id);
						console.log(data.data[index].majorName);

						$("#majorName").append(
							'<option value="' + data.data[index].id + '">' + data.data[index].majorName + '</option>'
						);
					});
				}
			}
		});

	}

```
这样的话，每次访问的话，都要先把第一级的标签添加到html中
```javascript
$(function() {
		getDept();
	});
```

后端

搭建SSM，简单的查询所有第一级，根据第一级查询第二级的方法等等
后台代码不用解释，返回一个集合，或者自己封装的结果类，最后都是一个json对象

升级版js代码

// 下拉栏获取所有的系，参数：要拼接option的下拉栏的id 如："#deptName"
function getSelDept(param) {
	// alert("getDept");
	// $("#majorName").empty();
	var deptNodeId = param;
	// alert(deptNodeId);
	$(deptNodeId).empty();
	$(deptNodeId).append(
			"<option value='' selected>" + '------请选择院系----' + "</option>");
	$.ajax({
		url : "./getAllDept",
		type : "POST",
		dataType : "json",
		success : function(data) {
			if (data != null) {
				// alert(data.status);
				$(data.data).each(
						function(index) {
							// console.log(data.data[index].id);
							// console.log(data.data[index].deptName);

							$(deptNodeId).append(
									'<option value="' + data.data[index].id
											+ '">' + data.data[index].deptName
											+ '</option>');
							
						});
			}

		}
	});
}

// 下拉栏动态拼接专业 根据系别id查专业id param1专业，param2院系 如#majorName
function getSelMajor(param1, param2) {
	// alert("Major");
	var majorNodeId = param1;
	var deptNodeId = param2;
	// alert(majorNodeId);
	var em = $(majorNodeId + "option:selected").val(); // 为了看选中的专业
	$(majorNodeId).empty(); // 清空selection
	// 添加友好选项
	$(majorNodeId).append(
			"<option value='' selected>" + '------请选择专业----' + "</option>");

	var deptId = $(deptNodeId + " option:selected").val();
	// console.log("deptId:" + deptId); //验证选中的系别
	if (deptId == "" || deptId == null) {
		return;
	}
	$.ajax({
		url : "./getMajorByDeptId/" + deptId,
		type : "POST",
		dataType : "json",
		// async : false,
		success : function(data) {
			if (data != null) {
				// alert(data.status);
				$(data.data).each(
						function(index) {
							console.log(data.data[index].id);
							console.log(data.data[index].majorName);

							$(majorNodeId).append(
									'<option value="' + data.data[index].id
											+ '"text="'
											+ data.data[index].majorName + '">'
											+ data.data[index].majorName
											+ '</option>');
							
						});
			}
		}
	});

}

基于数组的省市联查

使用了onchange（this）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<title>省市联动</title>
		<!--  -->
	</head>
	<body>

		<!-- 注意，this是代表选中的对象 DOM对象 -->
		<select id="province" onchange="getCityByProvince(this)">
			<option value="0">请选择</option>
			<option value="1">河北</option>
			<option value="2">山东</option>
			<option value="3">山西</option>
			<option value="4">河南</option>
		</select>
		<select id="city">
			<option value="0">请选择</option>
		</select>
	</body>

	<script type="text/javascript">
		/* 获取数组的四种方式 */
		var arr1 = new Array(4);
		var arr2 = new Array();
		var arr3 = new Array("1", "2", "3");
		var arr4 = ["", "", ""];

		var cities = new Array();
		cities[0] = [];
		cities[1] = ["邢台", "邯郸", "保定", "石家庄"];
		cities[2] = ["郑州", "开封", "洛阳", "驻马店"];
		cities[3] = ["济南", "青岛", "德州", "临沂"];
		cities[4] = ["太原", "吕梁", "长治", "阳泉"];

		function getCityByProvince(prov) {
			//alert(prov);
			$("#city").empty();
			$("#city").append("<option  value ='0'>请选择</option>");
			var pv = prov.value;
			var city = cities[pv];
			for (var i = 0; i < city.length; i++) {
				$("#city").append("<option  value =" + i + ">" + city[i] + "</option>");
			}

		}
	</script>
</html>