java web中实现select下拉框的三级联动（基于Ajax、JQuery）

java web中实现select下拉框的三级联动（基于Ajax、JQuery）

web开发过程中有非常多的select元素的使用，因而其联动的效果是必不可少的。下面就为大家讲解一下它的实现。

JS代码

利用jQuery技术在页面文档被读取时加载loadProvince函数：(document).ready(内接函数);
在loadProvince函数内有jquery的Ajax技术：采用get请求向服务器发送请求，URL为SelectController?action=getProvince，后接回调函数。data为返回的JSON数据，status为返回状态。而后将data中数据循环添加到ID为province的select中。
下面change函数实现过程同上。

	<script>
		$(document).ready(function loadProvince(){
			$.get("SelectController?action=getProvince",function(data,status){
				var jsonObj = JSON.parse(data);
				jsonObj.forEach(function append(item,index){
					$("#province").append("<option value='"+item.code+"'>"+item.name+"</option>")
				});
			});
			$("#province").change(function loadCity(){
				var province=$("#province").val();
				
				$.get("SelectController?action=getCity&province="+province,function(data,status){
					var jsonObj = JSON.parse(data);
					$("#city").empty();
					$("#qu").empty();
					$("#qu").append("<option value='noselect'>===请选择===</option>");
					$("#city").append("<option value='noselect'>===请选择===</option>");
					jsonObj.forEach(function append(item,index){
						$("#city").append("<option value='"+item.code+"'>"+item.name+"</option>");
					});
				});
			});
			$("#city").change(function loadCity(){
				var city=$("#city").val();
				
				$.get("SelectController?action=getQu&city="+city,function(data,status){
					var jsonObj = JSON.parse(data);
					$("#qu").empty();
					$("#qu").append("<option value='noselect'>===请选择===</option>");
					jsonObj.forEach(function append(item,index){
						$("#qu").append("<option value='"+item.code+"'>"+item.name+"</option>");
					});
				});
			});
		});
    </script>

Servlet代码

get方法中接收请求并作出响应

response.setCharacterEncoding("UTF-8");
		String action = request.getParameter("action");
		if(action.equals("getProvince")) {
			response.getWriter().append("[");
			response.getWriter().append("{\"code\":\"gd\",\"name\":\"广东省\"},");
			response.getWriter().append("{\"code\":\"fj\",\"name\":\"福建省\"},");
			response.getWriter().append("{\"code\":\"hn\",\"name\":\"湖南省\"}");
			response.getWriter().append("]");
			response.getWriter().flush();
		}else if(action.equals("getCity")) {
			String province = request.getParameter("province");
			if(province.equals("gd")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"gz\",\"name\":\"广州市\"},");
				response.getWriter().append("{\"code\":\"sz\",\"name\":\"深圳市\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}else if(province.equals("fj")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"xm\",\"name\":\"厦门市\"},");
				response.getWriter().append("{\"code\":\"qz\",\"name\":\"泉州市\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}else if(province.equals("hn")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"cs\",\"name\":\"长沙市\"},");
				response.getWriter().append("{\"code\":\"zjj\",\"name\":\"张家界\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}
		}else if(action.equals("getQu")) {
			String city = request.getParameter("city");
			if(city.equals("gz")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"hz\",\"name\":\"海珠区\"},");
				response.getWriter().append("{\"code\":\"th\",\"name\":\"天河区\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}else if(city.equals("sz")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"ba\",\"name\":\"宝安区\"},");
				response.getWriter().append("{\"code\":\"ft\",\"name\":\"福田区\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}else if(city.equals("xm")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"sm\",\"name\":\"思明区\"},");
				response.getWriter().append("{\"code\":\"hc\",\"name\":\"海沧区\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}else if(city.equals("qz")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"lc\",\"name\":\"鲤城区\"},");
				response.getWriter().append("{\"code\":\"fz\",\"name\":\"丰泽区\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}else if(city.equals("cs")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"fr\",\"name\":\"芙蓉区\"},");
				response.getWriter().append("{\"code\":\"tx\",\"name\":\"天心区\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}else if(city.equals("zjj")) {
				response.getWriter().append("[");
				response.getWriter().append("{\"code\":\"yd\",\"name\":\"永定区\"},");
				response.getWriter().append("{\"code\":\"wly\",\"name\":\"武陵源区\"}");
				response.getWriter().append("]");
				response.getWriter().flush();
			}
		}

HTML代码

<center>
	<p>省份：</p>
	<select class="form-control" style="width: 150px;" id="province">
	<option value="noselect">===请选择===</option>
	</select><br>
	<p>城市：</p>
	<select class="form-control" style="width: 150px;" id="city">
	<option value="noselect">===请选择===</option>
	</select><br>
	<p>区县：</p>
	<select class="form-control" style="width: 150px;" id="qu">
	<option value="noselect">===请选择===</option>
	</select>
</center>

代码实现