struts2 jquery json ajax 三级联动菜单
转自:http://blog.sina.com.cn/s/blog_4a9f3eea0100dvgm.html
js代码
$(document).ready(
function(){
$.ajax({
url:"../adminManage/bindTheater.action",
type:"GET",
dataType:"json",
success:bindTheaterList
});
}
);
function bindTheaterList(json){
// 把返回的json字符串赋值给变量data
var data=(json.theaterString);
//遍历json对象
for(var theater in data){
//var option = document.createElement("option");
//document.getElementByIdx("bindTheater").appendChild(option);
//option.value=data[theater].theaterId.value;
//option.text=data[theater].name.value;
//临时变量判断循环次数
var flag=0;
var option=document.createElement("option");
//json对象中的一个元素
for(var key in data[theater]){
//创建一个option
document.getElementByIdx("bindTheater").appendChild(option);
if(flag==0){
option.value=data[theater][key];
flag++;
}else{
option.text=data[theater][key];
flag=0;
}
}
}
}
function getHall(){
//绑定之前 清空第一个以外的option
$("#bindHall").children().eq(0).siblings().remove();
$("#bindShow").children().eq(0).siblings().remove();
var temp=$("#bindTheater").find("option:selected").val();
$.ajax({
url:"../adminManage/bindHall.action",
type:"get",
dataType:"json",
data:"theaterId="+temp,
success:bindHallList
});
}
//回调函数
function bindHallList(json){
data=(json.hallString);
for(hall in data){
var option = document.createElement("option");
for(key in data[hall]){
document.getElementByIdx("bindHall").appendChild(option);
option.text=data[hall][key];
}
}
}
function getShow(){
//绑定之前 清空第一个以外的option
$("#bindShow").children().eq(0).siblings().remove();
var temp = $("#bindHall").find("option:selected").val();
$.ajax({
url:"../adminManage/bindShow.action",
type:"get",
dataType:"json",
data:"hallId="+temp,
success:bindShowList
});
}
//回调函数
function bindShowList(json){
data=(json.showString);
for(show in data){
var option = document.createElement("option");
for(key in data[show]){
document.getElementByIdx("bindShow").appendChild(option);
option.text=data[show][key];
}
}
}
页面代码
<body>
<center>
<div>
<SPAN>
影院：
<select id="bindTheater" onChange="getHall()" style="width:100px;"></select>
</SPAN>
<SPAN>
大厅：
<select id="bindHall" onChange="getShow()" style="width:100px;">
<option value="-1">--</option>
</select>
</SPAN>
<span>
场次：
<select id="bindShow" style="width:100px;">
<option value="-1">--</option>
</select>
</span>
</div>
</center>
<s:submit id="submit" value="生成票" onClick="genarateTickets()"></s:submit>
<div>
</div>
</body>
配置文件
<package name="adminManage" extends="struts-default,json-default" namespace="/adminManage">
<action name="bindTheater" class="AdminManagementAction" method="bindTheater">
<result type="json">
</result>
</action>
<action name="bindHall" class="AdminManagementAction" method="bindHall">
<result type="json"></result>
</action>
<action name="bindShow" class="AdminManagementAction" method="bindShow">
<result type="json"></result>
</action>
</package>
action代码
public String bindTheater() throws FileNotFoundException, IOException{
List<Theater> list=adminService.findAllTheter();
StringBuilder sb= new StringBuilder();
int size=list.size();
sb.append("[");
for (Theater theater : list) {
size--;
sb.append("{theaterId:\"");
sb.append(theater.getTheaterId());
sb.append("\",theaterName:\"");
sb.append(theater.getName());
sb.append("\"}");
if(size>0){
sb.append(",");
}
}
sb.append("]");
this.theaterString=sb.toString();
return SUCCESS;
}
public String bindHall(){
List<Hall> list=this.adminService.findHallBytheaterId(Integer.parseInt(this.theaterId));
StringBuilder sb= new StringBuilder();
int size=list.size();
sb.append("[");
for (Hall hall : list) {
size--;
sb.append("{hallId:\"");
sb.append(hall.getHid());
sb.append("\",hallId:\"");
sb.append(hall.getHid());
sb.append("\"}");
if(size>0){
sb.append(",");
}
}
sb.append("]");
this.hallString = sb.toString();
return SUCCESS;
}
public String bindShow(){
List<Show> list=this.adminService.findShowByHallId(Integer.parseInt(this.hallId));
StringBuilder sb= new StringBuilder();
int size=list.size();
sb.append("[");
for (Show show : list) {
size--;
sb.append("{hallId:\"");
sb.append(show.getSid());
sb.append("\",hallId:\"");
sb.append(show.getStartTime());
sb.append("\"}");
if(size>0){
sb.append(",");
}
}
sb.append("]");
this.showString = sb.toString();
return SUCCESS;
}
这里要暴露出几个私有的字段给json序列化（省略getter和setter）
private String theaterString;
private String hallString;
private String showString;
private String theaterId;
private String hallId;
private String showId;
上一篇： CSS之BFC解析
推荐阅读