用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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
JavaScript的function函数详细介绍
Nov 20 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
dojo 之基础篇
2007/03/24 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
生产部主管岗位职责
2014/01/06 职场文书
学校宣传标语
2014/06/18 职场文书
商铺消防安全责任书
2014/07/29 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
骨干教师考核评语
2014/12/31 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
地球上的星星观后感
2015/06/02 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
Python MNIST手写体识别详解与试练
2021/11/07 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL