前言
前台JSP页面需要实现下拉菜单的级联效果,实现方式如题,采用Ajax+Json,分享下实现过程。
正题
先看下效果图:
前台
<tr>
<td>
注册地址
<!-- registeredAddressSection -->
</td>
<td>
<select class="combox" id="zhuceid" name="zhuceid"
onchange="getzhuceid()">
<c:forEach var="dizhi" items="${dtdizhi}">
<option id="${dizhi.id}"
<c:if test="${dizhi.id==zhuceid}">selected="selected"</c:if>
value="${dizhi.id}">
${dizhi.name}
</option>
</c:forEach>
</select> <font color="red">*</font>
</td>
<td>
区
</td>
<td>
<!-- 当主持地址变化时,此下拉框发生级联-->
<select class="combox" name="registeredAddressTown"
id="registeredAddressTown">
</td>
</tr>
上面的代码是两个下拉框的代码,第一个下拉框采用jstl将后台的具体的list地址信息进行加载,当第一个下拉框发生变化时会触发onchange="getzhuceid()"事件
js中方法
function getzhuceid() {
$("#registeredAddressTown").empty();//清空
var zhuceid = document.getElementById("zhuceid").value;
var url = "public_qu2zhen.action?quid=" + zhuceid;
$.ajax( {
type : "POST",
url : url,
data : {},
dataType : "JSON",
success : function(data) {
//data为后台返回的Json信息
for(var n=0;n<data.length;n++){
var ids=data[n].id;
var names=data[n].name;
$("#registeredAddressTown").append("<option id='"+ids+"' value='"+names+"'>"+names+"</option>");
}
}
})
}
getzhuceid通过得到当前注册地址的ID,然后将该ID传到action类,然后去数据库中拿到该注册地址下的所有地址,通过json形式进行返还,然后将json加载到第二个下拉菜单中,以实现级联的效果。
Action方法
// 注册地址:区->镇
public void qu2zhen() {
List<Dictionary> dictionaries = new ArrayList<Dictionary>();
try {
// 1.6注册地址/经营地址
String quid = request.getParameter("quid").trim();
List qu2zhen = testService.findListDictionaries(quid);
ActionContext.getContext().put("qu2zhen", qu2zhen);
dictionaries = objectToModel(qu2zhen);
} catch (Exception e) {
e.printStackTrace();
}
String result = JsonUtils.toJson(dictionaries);
//打印转化出来的json
System.out.println(result);
//[{"id":71,"name":"东华门街道"},{"id":72,"name":"景山街道"},{"id":73,"name":"交道口街道"},{"id":74,"name":"安定门街道"},{"id":75,"name":"北新桥街道"},{"id":76,"name":"东四街道"},{"id":77,"name":"朝阳门街道"},{"id":78,"name":"建国门街道"},{"id":79,"name":"东直门街道"},{"id":80,"name":"和平里街道"},{"id":81,"name":"前门街道"},{"id":82,"name":"崇文门外街道"},{"id":83,"name":"东花市街道"},{"id":84,"name":"龙潭街道"},{"id":85,"name":"体育馆路街道"},{"id":86,"name":"天坛街道"},{"id":87,"name":"永定门外街道"}]
outPrint(response, result);
}
上面的代码就比较简单了,在方法中得到前台传过来的id,然后调用service方法拿到该id下的所有list实体集合,然后将list集合转化为了json,我们同时将Json打印了出来。这里的Json转化正是上一篇文章中,拓展中介绍的将list集合转化为json对象的方法。
小结
这样就利用Ajax+json就实现了下拉菜单的级联的效果。关于级联实现的方式有多种,不过其原理都是一样的,掌握了一种,其它的也就都掌握了。