用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 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
Javascript的this用法
Jan 16 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
phpwind中的数据库操作类
2007/01/02 PHP
php注销代码(session注销)
2012/05/31 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
Javascript中Eval函数的使用说明
2008/10/11 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
关于axios如何全局注册浅析
2018/01/14 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
Python信息抽取之乱码解决办法
2017/06/29 Python
深入理解Django中内置的用户认证
2017/10/06 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
责任书范本
2014/08/25 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL