用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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
js实现移动端轮播图
Dec 21 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
vue中改变滚动条样式的方法
Mar 03 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
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
vue cli 全面解析
2018/02/28 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
详解Python中的Cookie模块使用
2015/07/06 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
SQL数据库笔试题
2016/03/08 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
大学新生欢迎词
2014/01/10 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
医学求职信
2014/05/28 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
同意落户证明
2015/06/19 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
JavaScript 数组去重详解
2021/09/15 Javascript