用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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
给js文件传参数(详解)
Jul 13 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
自动刷新网页,自动刷新当前页面,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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python里隐藏的“禅”
2014/06/16 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
python openpyxl使用方法详解
2019/07/18 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Python更换pip源方法过程解析
2020/05/19 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
思想品德自我评价
2014/02/04 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
高中军训感言600字
2014/03/11 职场文书
爱情保证书
2015/01/17 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
python运行脚本文件的三种方法实例
2022/06/25 Python
win10搭建配置ftp服务器的方法
2022/08/05 Servers