用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+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
JavaScript实现动态生成表格
Aug 02 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
在PHP中使用redis
2013/11/04 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
js代码实现轮播图
2020/05/04 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python 实现归并排序算法
2012/06/05 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
json跨域调用python的方法详解
2017/01/11 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
深入了解Django中间件及其方法
2019/07/26 Python
python实现图片转字符画的完整代码
2021/02/21 Python
物流管理专业大学生自荐信
2013/10/04 职场文书
七一建党日演讲稿
2014/09/05 职场文书
《刷子李》教学反思
2016/02/20 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS