用jquery生成二級(jí)菜單的實(shí)例代碼
更新時(shí)間:2013年06月24日 11:04:51 作者:
這篇文章介紹了用jquery生成二級(jí)菜單的代碼,需要的朋友可以參考一下
javascript
頁面中的函數(shù)
復(fù)制代碼 代碼如下:
function querySub(id,sid/*選中的項(xiàng)*/){
$.post('${path}/page/article/querySubChannelArticle.action',
{'channelId':id},function(data){
$('select[name="article.subChannel.subId"] option[value!=""]').remove();
var jsonObj = data;
for ( var i = 0; i < jsonObj.length; i++) {
var $option = $('<option>');
$option.attr('value',jsonObj[i].subId);
if(jsonObj[i].subId === sid){
$option.attr('selected',true);
}
$option.text(jsonObj[i].subName);
$('select[name="article.subChannel.subId"]').append($option);
}
});
}
$(function(){
querySub(<s:property value='article.subChannel.channel.channelId'/>,<s:property value='article.subChannel.subId'/>);
});
頁面代碼:
復(fù)制代碼 代碼如下:
<tr>
<th>一級(jí)欄目</th>
<td valign="middle">
<s:select id='_channel' list="channelList" listKey="channelId"
listValue="channelName"
key="article.subChannel.channel.channelId"
onchange="querySub(this.value)"></s:select>
</td>
</tr>
<tr>
<th>二級(jí)欄目</th>
<td valign="middle">
<s:select name='article.subChannel.subId' list="{}" headerKey="" headerValue="-請選擇-"></s:select>
<!--<s:property value="article.subChannel.subName"/>
--></td>
</tr>
服務(wù)器端
復(fù)制代碼 代碼如下:
public String querySubChannelArticle(){
HttpServletResponse response=getResponse();
HttpServletRequest request=getRequest();
response.setContentType("application/json; charset=UTF-8");
PrintWriter out =null;
try {
out = response.getWriter();
List<Map<String,Object>> list = new LinkedList<Map<String,Object>>();
if(channelId!=null && !channelId.equals("")){
Channel tmp = new Channel();
tmp.setChannelId(Integer.parseInt(channelId));
subChannelList = subChannelDAO.listSubChannel(tmp);
for(Object oo:subChannelList){
Map<String,Object> obj = new HashMap<String,Object>();
SubChannel c = (SubChannel)oo;
obj.put("subId", c.getSubId());
obj.put("subName", c.getSubName());
list.add(obj);
}
}
String outStr = JsonUtil.toJSONStr(list);
out.println(outStr);
}catch(Exception e){
e.printStackTrace();
}
out.flush();
out.close();
return null;
}
其實(shí)蠻簡潔的
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的淡入淡出二級(jí)菜單效果代碼
- 基于jQuery實(shí)現(xiàn)的向下滑動(dòng)二級(jí)菜單效果代碼
- jquery實(shí)現(xiàn)像柵欄一樣左右滑出式二級(jí)菜單效果代碼
- jquery+css實(shí)現(xiàn)的紅色線條橫向二級(jí)菜單效果
- jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單效果實(shí)例
- 鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
- jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例
- jquery實(shí)現(xiàn)樹形二級(jí)菜單實(shí)例代碼
- jquery實(shí)現(xiàn)的簡單二級(jí)菜單效果代碼
相關(guān)文章
jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
在前面我們分別通過innerHeight()和innerWidth()來獲得第一個(gè)匹配元素內(nèi)部區(qū)域的高度和寬度,我們在應(yīng)用中往往除了需要內(nèi)部的尺寸,同樣還需要知道外部的高度和寬度.2009-11-11利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
文字浮動(dòng)提示效果想必大家都有見到過吧,其實(shí)實(shí)現(xiàn)起來很賤的,下面為大家詳細(xì)介紹下使用jquery是如何做到的,感興趣的朋友可以參考下2013-12-12Jquery加載時(shí)從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList實(shí)例
從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList,option選項(xiàng)value動(dòng)態(tài)賦值,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06jQuery簡單實(shí)現(xiàn)仿京東商城的左側(cè)菜單效果代碼
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)仿京東商城的左側(cè)菜單效果代碼,通過簡單的jQuery鼠標(biāo)事件及元素動(dòng)態(tài)變換實(shí)現(xiàn)樣式動(dòng)態(tài)切換功能,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法,實(shí)例分析了jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用介紹
jQuery EasyUI API 中文文檔 - NumberSpinner數(shù)值微調(diào)器使用,需要的朋友可以參考下。2011-10-10