快捷導(dǎo)航

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:

復(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)行的截圖：

寫(xiě)給有需要的人。。。參考參考

您可能感興趣的文章:

相關(guān)文章

使用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的熱更新
熱更新是指在應(yīng)用程序運(yùn)行時(shí),對(duì)程序的部分內(nèi)容進(jìn)行更新,而無(wú)需重啟整個(gè)應(yīng)用程序,熱更新是在不停止整個(gè)應(yīng)用程序的情況下,將新的代碼、資源或配置應(yīng)用于正在運(yùn)行的應(yīng)用程序,本文講給大家介紹一下使用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的熱更新,需要的朋友可以參考下
2023-08-08
解析原來(lái)瀏覽器原生支持JS Base64編碼解碼
這篇文章主要介紹了解析原來(lái)瀏覽器原生支持JS Base64編碼解碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫(huà)效果的導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫(huà)效果的導(dǎo)航菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
JS實(shí)現(xiàn)顯示當(dāng)前日期的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了js實(shí)現(xiàn)顯示當(dāng)前日期功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-07-07
JS 加入收藏夾的代碼(主流瀏覽器通用)
所有瀏覽器通用的js添加收藏夾代碼，本文整理了多種方法實(shí)現(xiàn)加入收藏夾功能，下面為大家詳細(xì)介紹下實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈
2013-05-05
js實(shí)現(xiàn)touch移動(dòng)觸屏滑動(dòng)事件
在開(kāi)始描述touch事件之前，需要先描述一下多觸式系統(tǒng)中特有的touch對(duì)象（android和iOS乃至nokia最新的meego系統(tǒng)都模擬了類似的對(duì)象）。這個(gè)對(duì)象封裝一次屏幕觸摸，一般來(lái)自于手指。它在touch事件觸發(fā)的時(shí)候產(chǎn)生，可以通過(guò)touch event handler的event對(duì)象取到
2015-04-04
js實(shí)現(xiàn)圖片和鏈接文字同步切換特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片和鏈接文字同步切換特效的方法,涉及javascript操作文字及圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)左右兩側(cè)浮動(dòng)廣告，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
JS正則子匹配實(shí)例分析
這篇文章主要介紹了JS正則子匹配用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了js正則字匹配的概念、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
JS實(shí)現(xiàn)的數(shù)字格式化功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的數(shù)字格式化功能,結(jié)合實(shí)例形式分析了javascript針對(duì)數(shù)字與字符的相關(guān)運(yùn)算處理技巧,需要的朋友可以參考下
2017-02-02