用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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
一个域名查询的程序
2006/10/09 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python flask安装和命令详解
2019/04/02 Python
用python做游戏的细节详解
2019/06/25 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python实现双色球随机选号
2020/01/01 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
简单介绍Object类的功能、常用方法
2013/10/02 面试题
篝火晚会策划方案
2014/05/16 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
党员查摆剖析材料
2014/10/10 职场文书
营销与策划实训报告
2014/11/05 职场文书
体育活动总结
2015/02/04 职场文书
发票退票证明
2015/06/24 职场文书
企业愿景口号
2015/12/25 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
java多态注意项小结
2021/10/16 Java/Android