用jquery生成二级菜单的实例代码


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; 
    }  

其实蛮简洁的
Javascript 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
Jquery解析json数据详解
Dec 26 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
js+css实现导航效果实例
Feb 10 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 #Javascript
jquery中的事件处理详细介绍
Jun 24 #Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 #Javascript
Js注册协议倒计时的小例子
Jun 24 #Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 #Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 #Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 #Javascript
You might like
简单谈谈favicon
2015/06/10 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python和opencv实现抠图
2018/07/18 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python银行系统实现源码
2019/10/25 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
python批量修改xml属性的实现方式
2020/03/05 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
大学生学雷锋活动总结
2014/06/26 职场文书
销售竞赛活动方案
2014/08/23 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
《藏戏》教学反思
2016/02/23 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL