用jquery生成二级菜单的实例代码

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;
    }

其实蛮简洁的

(0)

相关推荐

  • jquery实现像栅栏一样左右滑出式二级菜单效果代码

    本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/ 具体代码如下: <!DOCTYPE html> <head> <meta ht

  • jquery实现带二级菜单的导航示例

    复制代码 代码如下: $(document).ready(function () {    $('#Top .Toolbar1 .CentreBox .Menu .List1 li').mouseenter(function () {        var index = $(this).parent().children().index(this);        $(this).parent().children().each(function () {            if ($(t

  • 基于jQuery实现的向下滑动二级菜单效果代码

    本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • 鼠标悬浮显示二级菜单效果的jquery实现

    1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s

  • jquery+css实现的红色线条横向二级菜单效果

    本文实例讲述了jquery+css实现的红色线条横向二级菜单效果.分享给大家供大家参考.具体如下: 这是一款带导航的菜单,当前是哪一项菜单,会很个性的显示出来,鼠标放上后会显示菜单缺口,挺有意思的吧,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-red-color-2row-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • jquery实现的简单二级菜单效果代码

    本文实例讲述了jquery实现的简单二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的二级菜单,研究了这么多天,才学会用jquery写一个菜单,也算是对自己的鼓励吧,自我感觉这个菜单很不错,欢迎朋友们指点江山. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-menu-style-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • jQuery实现向下滑出的二级菜单效果实例

    本文实例讲述了jQuery实现向下滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这里用jQuery实现向下滑出的二级菜单代码,滑出菜单,鼠标放在主菜单的任意一项上,就会向下滑出二级的子菜单.当然本代码只是一个演示,有些菜单是随便弄的,经过测试,兼容IE8.火狐和Chrome等浏览器,有兴趣的你可以自己试下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-2menu-style-codes/ 具体代码如下

  • jQuery实现的淡入淡出二级菜单效果代码

    本文实例讲述了jQuery实现的淡入淡出二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款加入了jQuery的菜单,一个看似平凡菜单突然有味道.有生机起来,这里将jQuery1.3.2引用进来,让弹出的二级菜单具备淡入淡出的效果,虽然就效果本身来说并不起眼,但比起无任何效果的菜单,从体验上来说,已经强了很多倍. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-2l-nav-menu-codes/ 具

  • jquery实现树形二级菜单实例代码

    直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • 用jquery生成二级菜单的实例代码

    javascript 页面中的函数 复制代码 代码如下: function querySub(id,sid/*选中的项*/){$.post('${path}/page/article/querySubChannelArticle.action',                 {'channelId':id},function(data){                     $('select[name="article.subChannel.subId"] option[va

  • jquery实现动态菜单的实例代码

    jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式. 其具体步骤可以分为以下几步: •创建一个含有要表达的菜单的html页面 复制代码 代码如下: <html>  <head>    <title>jquery示例2:jquery菜单</title>    <meta http-equiv="Content-Type" content="text/html; ch

  • jQuery实现下拉菜单的实例代码

    基本效果是这样的~~ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width:

  • jquery多级树形下拉菜单的实例代码

    效果图: 使用方法 (1)引入 jQuery 包,下载地址 (2)引入 zTree 包,下载地址 (3)引入 tree-select.js (4)$("#id").treeSelect(data); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TreeSelect</title>

  • jQuery实现下滑菜单导航效果代码

    本文实例讲述了jQuery实现下滑菜单导航效果代码.分享给大家供大家参考.具体如下: 这里演示jquery向下滑的导航菜单代码,黄色风格下滑菜单,可作为网站的主导航菜单,二级菜单向下滑出,兼容性也是很不错的,本菜单来源自网络,丢失原作者署名信息,请原作者看到后与我们联系署名. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html

  • 微信公众号测试账号自定义菜单的实例代码

    自定义菜单接口可实现多种类型按钮,如下: 1.click:点击推事件 用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event 的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互: 2.view:跳转URL 用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息. 3.scancode_push:扫码推事件 用户点击按钮后,微信客户

  • 基于Bootstrap和jQuery构建前端分页工具实例代码

    前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

  • Vue 递归多级菜单的实例代码

    考虑以下菜单数据: [ { name: "About", path: "/about", children: [ { name: "About US", path: "/about/us" }, { name: "About Comp", path: "/about/company", children: [ { name: "About Comp A", path:

  • asp.net 仿微信端菜单设置实例代码详解

    第一步:添加引用文件 <link rel="stylesheet" href="~/assets/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="~/assets/css/font-awesome.min.css" rel="external nofollow"

  • jQuery判断邮箱格式对错实例代码讲解

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>检测Email地址格式是否正确</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"><

随机推荐