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>