用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接受和处理xml数据的代码(.net)
Mar 28 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
js a标签点击事件
Mar 30 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
koa2的中间件功能及应用示例
Mar 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
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
php微信开发之关注事件
2018/06/14 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
matplotlib绘图实例演示标记路径
2018/01/23 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
PHP中如何创建和修改数组
2012/05/02 面试题
父亲八十大寿答谢词
2014/01/23 职场文书
大学生求职信范文
2014/05/24 职场文书
意向书范本
2014/07/29 职场文书
入党转正申请报告
2015/05/15 职场文书
会议简报格式范文
2015/07/20 职场文书