jquery實作下拉選單的二級連動利用json物件從DB取值顯示連動_javascript技巧

利用struts2和Ajax實現json物件的傳輸，然後實現選單的二級連動

下面是我的js檔案原碼：

複製程式碼 程式碼如下:

var mail={
//初始化
init:{
//初始化資料
initdata:{ did:'',
ttitle:'',
sendpassword:'',
description:''
},
//初始化事件
initevent:{
DataEvent:function(){
$("#did").unbind("change");//取得一級選單，綁定事件
$("#did").bind("change ",function(){
//alert($(this).val());
mail.init.initdata.did=$(this).val();
//alert( mail.init.initdata.did);
mail.init.initevent.getuser();
});
},
getuser: function(){
$.post("mailAction_showUsers?did=" mail.init.initdata.did,null,function(data){
var uidoption=$("#uid") ;//取得二等級選單
uidoption.empty();//將清單清空
for(var i=0;i//往裡面填滿option，經由循環
uidoption.append("" data.users[i].username "" );
}
});
},
submitCheck:function(){
$("#send").unbind("click");
$("#send").bind("click ",function(){
mail.init.initdata.description=$("input[type='textarea']").text();
mail.init.initdata.sendpassword=$("input [name='sendpassword']").val();
mail.init.initdata.ttitle=$("input[name='ttitle']").val();

if (mail.init.initdata.sendpassword==""){
alert("請輸入密碼!");
return false;
}
else if(mail.init.initdata.ttitle ==""){
alert("請輸入主題！ ");
return false ;
}
else if(mail.init.initdata.description==""){
alert("請輸入內容！");
return false ;
}
else
return true;
});
}
}
}
}

$().ready(function (){
mail.init.initevent.DataEvent();
mail.init.initevent.submitCheck();

});

這是後台>});

這是後台>}); 這是後台的action:

複製程式碼


程式碼如下:


private int did; getDid(){
...
}
public void setDid(Strign did){
...
}
public String showUsers(){

users=(ArrayList)this.userService.getUsersByDid(did);
System.out.println(users.size() "...");
return SUCCESS;

} struts.xml的設定：

複製程式碼


程式碼如下:



程式碼如下:

程式碼如下: 程式碼如下: >

前台的jsp頁：

複製程式碼 程式碼如下: 接收者 這個是實現後運行的截圖：  寫給有需要的人。 。 。參考參考