Posted in Javascript onJune 24, 2013
javascript
页面中的函数
function querySub(id,sid/*选中的项*/){ $.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'/>); });
页面代码:
<tr> <th>一级栏目</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>二级栏目</th> <td valign="middle"> <s:select name='article.subChannel.subId' list="{}" headerKey="" headerValue="-请选择-"></s:select> <!--<s:property value="article.subChannel.subName"/> --></td> </tr>
服务器端
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; }
其实蛮简洁的
用jquery生成二级菜单的实例代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@