用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 对象中的类数组操作
Apr 27 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
ext jquery 简单比较
2010/04/07 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
python如何支持并发方法详解
2020/07/25 Python
python中操作文件的模块的方法总结
2021/02/04 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
监考失职检讨书
2015/01/26 职场文书
教师求职信怎么写
2015/03/20 职场文书
春节晚会开场白
2015/05/29 职场文书
学校运动会简讯
2015/07/20 职场文书
高三化学教学反思
2016/02/22 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python