用jquery生成二级菜单的实例代码
2019/6/29 22:43:55
本文主要是介绍用jquery生成二级菜单的实例代码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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生成二级菜单的实例代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习