用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 相关文章推荐
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
javascript读写json示例
Apr 11 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
认识less和webstrom的less配置方法
Aug 02 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 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的配置文件php.ini
2006/10/09 PHP
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
css配合jquery美化 select
2013/11/29 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python实现的计算器功能示例
2018/04/26 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
小学校园活动策划
2014/01/30 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
部门2015年度工作总结
2015/04/29 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers