jquery實(shí)現(xiàn)下拉菜單的二級(jí)聯(lián)動(dòng)利用json對(duì)象從DB取值顯示聯(lián)動(dòng)
更新時(shí)間:2014年03月27日 11:19:10 作者:
這篇文章主要介紹了jquery實(shí)現(xiàn)下拉菜單的二級(jí)聯(lián)動(dòng)利用json對(duì)象從DB取值顯示聯(lián)動(dòng),需要的朋友可以參考下
利用struts2和Ajax實(shí)現(xiàn)json對(duì)象的傳輸,然后實(shí)現(xiàn)菜單的二級(jí)聯(lián)動(dòng)
下面是我的 js文件原碼:
var mail={
//初始化
init:{
//初始化數(shù)據(jù)
initdata:{
did:'',
ttitle:'',
sendpassword:'',
description:''
},
//初始化事件
initevent:{
DataEvent:function(){
$("#did").unbind("change");//獲取一級(jí)菜單,綁定事件
$("#did").bind("change",function(){
//alert($(this).val());
mail.init.initdata.did=$(this).val();
//alert(mail.init.initdata.did);
mail.init.initevent.getuser();
});
},
<span style="color:#ff0000;">getuser:function(){
$.post("mailAction_showUsers?did="+mail.init.initdata.did,null,function(data){
var uidoption=$("#uid") ;//獲取二級(jí)菜單
uidoption.empty();//將列表清空
for(var i=0;i<data.users.length;i++){
//向里面填充option,通過(guò)循環(huán)
uidoption.append("<option value="+data.users[i].uid+ " >"+data.users[i].username+"</option>" );
}
});</span>
},
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("請(qǐng)輸入密碼!");
return false;
}
else if(mail.init.initdata.ttitle==""){
alert("請(qǐng)輸入主題!");
return false ;
}
else if(mail.init.initdata.description==""){
alert("請(qǐng)輸入內(nèi)容!");
return false;
}
else
return true;
});
}
}
}
}
$().ready(function(){
mail.init.initevent.DataEvent();
mail.init.initevent.submitCheck();
});
這是后臺(tái)的action:
private int did;
public String getDid(){
...
}
public void setDid(Strign did){
...
}
public String showUsers(){
users=(ArrayList<User>)this.userService.getUsersByDid(did);
System.out.println(users.size()+"...");
return SUCCESS;
}
struts.xml的配置:
<package name="users" namespace="/" extends="json-default">
<action name="mailAction_showUsers" method="showUsers" class="mailAction">
<result type="json"></result>
</action>
</package>
前臺(tái)的jsp頁(yè)面:
<td width="65px">接收人</td>
<td> <s:select list="departmentlist" listKey="did" listValue="dname" id="did" name="did"></s:select>
<s:select list="users" listKey="uid" listValue="username" id="uid" name="uid"></s:select>
</td>
這個(gè)是 實(shí)現(xiàn)后運(yùn)行的截圖:
寫給有需要的人。。。參考參考
下面是我的 js文件原碼:
復(fù)制代碼 代碼如下:
var mail={
//初始化
init:{
//初始化數(shù)據(jù)
initdata:{
did:'',
ttitle:'',
sendpassword:'',
description:''
},
//初始化事件
initevent:{
DataEvent:function(){
$("#did").unbind("change");//獲取一級(jí)菜單,綁定事件
$("#did").bind("change",function(){
//alert($(this).val());
mail.init.initdata.did=$(this).val();
//alert(mail.init.initdata.did);
mail.init.initevent.getuser();
});
},
<span style="color:#ff0000;">getuser:function(){
$.post("mailAction_showUsers?did="+mail.init.initdata.did,null,function(data){
var uidoption=$("#uid") ;//獲取二級(jí)菜單
uidoption.empty();//將列表清空
for(var i=0;i<data.users.length;i++){
//向里面填充option,通過(guò)循環(huán)
uidoption.append("<option value="+data.users[i].uid+ " >"+data.users[i].username+"</option>" );
}
});</span>
},
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("請(qǐng)輸入密碼!");
return false;
}
else if(mail.init.initdata.ttitle==""){
alert("請(qǐng)輸入主題!");
return false ;
}
else if(mail.init.initdata.description==""){
alert("請(qǐng)輸入內(nèi)容!");
return false;
}
else
return true;
});
}
}
}
}
$().ready(function(){
mail.init.initevent.DataEvent();
mail.init.initevent.submitCheck();
});
這是后臺(tái)的action:
復(fù)制代碼 代碼如下:
private int did;
public String getDid(){
...
}
public void setDid(Strign did){
...
}
public String showUsers(){
users=(ArrayList<User>)this.userService.getUsersByDid(did);
System.out.println(users.size()+"...");
return SUCCESS;
}
struts.xml的配置:
復(fù)制代碼 代碼如下:
<package name="users" namespace="/" extends="json-default">
<action name="mailAction_showUsers" method="showUsers" class="mailAction">
<result type="json"></result>
</action>
</package>
前臺(tái)的jsp頁(yè)面:
復(fù)制代碼 代碼如下:
<td width="65px">接收人</td>
<td> <s:select list="departmentlist" listKey="did" listValue="dname" id="did" name="did"></s:select>
<s:select list="users" listKey="uid" listValue="username" id="uid" name="uid"></s:select>
</td>
這個(gè)是 實(shí)現(xiàn)后運(yùn)行的截圖:
寫給有需要的人。。。參考參考
您可能感興趣的文章:
- php+jQuery實(shí)現(xiàn)的三級(jí)導(dǎo)航欄下拉菜單顯示效果
- jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能完整示例
- jQuery實(shí)現(xiàn)菜單的顯示和隱藏功能示例
- jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
- jQuery實(shí)現(xiàn)可高亮顯示的二級(jí)CSS菜單效果
- jquery實(shí)現(xiàn)在網(wǎng)頁(yè)指定區(qū)域顯示自定義右鍵菜單效果
- jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示下劃線的漸變下拉菜單效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示(兩種方法)
- 鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
- 基于jquery實(shí)現(xiàn)后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示
- jQuery實(shí)現(xiàn)菜單顯示效果
相關(guān)文章
Javascript頁(yè)面添加到收藏夾的簡(jiǎn)單方法
這篇文章介紹了Javascript頁(yè)面添加到收藏夾的簡(jiǎn)單方法,有需要的朋友可以參考一下2013-08-08
一次微信小程序內(nèi)地圖的使用實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于一次微信小程序內(nèi)地圖使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JS 文字符串轉(zhuǎn)換unicode編碼函數(shù)
AJAX傳遞中文字符串時(shí)必須把中文字符串編碼成unicode,一般會(huì)用到JS的自帶函數(shù)escape().不過(guò)找到了更好的函數(shù)來(lái)確決中文字符轉(zhuǎn)換成unicode編碼的函數(shù)2009-05-05
uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
JavaScript偏函數(shù)與柯里化實(shí)例詳解
這篇文章主要介紹了JavaScript偏函數(shù)與柯里化,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript偏函數(shù)與柯里化的概念、原理、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03

