用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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 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 调试利器debug_print_backtrace()
2012/07/23 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
客户端静态页面玩分页
2006/06/26 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
python操作mysql代码总结
2018/06/01 Python
python中class的定义及使用教程
2019/09/18 Python
tornado+celery的简单使用详解
2019/12/21 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
工业设计专业个人求职信范文
2013/12/28 职场文书
六查六看心得体会
2014/10/14 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
海弦WR-800F
2022/04/05 无线电