JS动态级联菜单是前端常用的一个功能，特此抽时间研究了下，附上代码

<html>

<head>

    <meta charset="utf-8" />

    <title>级联菜单</title>

</head>

<body>

    <form name="caseSelect" class="J_select">

        <p>

            <select name="chapter">

                <option value="0">请选择章</option>

            </select>

            <select name="section">

                <option value="0">请选择节</option>

            </select>

            <select name="section_s">

                <option value="0">请选择次节</option>

            </select>

            <select name="section_2s">

                <option value="0">请选择次次节</option>

            </select>

        </p>

    </form>

</body>

<script type="text/javascript" src="http://img3.cache.netease.com/game/img15/dahua-music/js/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

// 原生

var data = [

            {text:'1. DOM基础',value:'1',

            list:[

                {text:'1.1 文档树',value:'1.1',

                    list:[{text:'1.1.1 Hello World',value:'1.1.1',

                                list:[{text:'1.1.1.1 OK',value:'1.1.1.1'}]},

                          {text:'1.1.2 Web Dev',value:'1.1.2',list:[{text:'1.1.2.1 OK2',value:'1.1.2.1'}]}]},

                {text:'1.2 节点操作',value:'1.2'},

                {text:'1.3 元素遍历',value:'1.3'},

                {text:'1.4 样式操作',value:'1.4'},

                {text:'1.5 属性操作',value:'1.5'},

                {text:'1.6 表单操作',value:'1.6'}

            ]},

            {text:'2. 事件模型',value:'2',

            list:[

                {text:'2.1 事件类型',value:'2.1',list:[{text:'2.1.1 Hello World',value:'2.1.1',list:[{text:'2.1.1.1 OK',value:'2.1.1.1'}]}]},

                {text:'2.2 事件模型',value:'2.2'},

                {text:'2.3 事件应用',value:'2.3'}

            ]}

        ]; 

// 文档加载完之后执行

jQuery(function($){

    var Jselect = $('.J_select select');

    var JilianSelect = window.JilianSelect;

    var chapterSelect = $('.J_select select').eq(0);

    var sectionSelect = $('.J_select select').eq(1);

    var JilianSelect = {

        init:function(Jselect,data){

            var self = this;

            // var this.Jselect = Jselect;

            // var this.data = data;

            self.bind(data);

            this.fillSelect(Jselect.eq(0),data);

        },

        fillSelect: function(select,list){

            //清除原有数据

            var option = select.find('option');

            for(var i=option.length-1;i>0;i--){

                option.eq(i).remove();

            }

            // 新增数据

            $.each(list, function(i,item){

                select.append('<option value="'+item.value+'">'+item.text+'</option>');

            });

        },

        bind: function(data){

            var self = this;

            Jselect.change( function() {

              // 下拉触发

              var value = this.value;

              var nextSelect = $(this).next();

              // 多层方法1

              // var tag = this.value.split('.');

              //   var str="data";

              //   for(var j=0;j<tag.length;j++){

              //       str+="["+(tag[j]-1)+"].list";

              //   }

              // self.fillSelect(nextSelect,eval(str));

              // 2层

              // $.each(data, function(i, item) {

              //   if (value == item.value) {

              //      self.fillSelect(nextSelect,item.list);

              //   }

              // });

              // 多层方法2

              function tochild(it){

                $.each(it, function(i, item) {

                  if (value == item.value) {

                     self.fillSelect(nextSelect,item.list);

                  } else{

                    if(item.list)

                     tochild(item.list);

                  }

                });

              }

              tochild(data);

              // $.each(data, function(i, item) {

              //   if (value == item.value) {

              //      self.fillSelect(nextSelect,item.list);

              //   } else {

              //       // 第三个

              //        $.each(item.list, function(c, child) {

              //           if (value == child.value) {

              //              self.fillSelect(nextSelect,child.list);

              //           } else {

              //               // 第四个

              //               $.each(child.list, function(c4, child4) {

              //                   if (value == child4.value) {

              //                      self.fillSelect(nextSelect,child4.list);

              //                   }

              //               })

              //           }

              //       })

              //   }

              // });

            });

        }

    }

    JilianSelect.init(Jselect,data);

});

</script>

<html>

JS动态级联菜单的更多相关文章

  1. JS实战 · 级联菜单选择省份和城市（两种）

    DOM编程步骤.思路 1.定义界面:      通过html标签将数据进行封装: 2.定义一些静态样式:      利用css: 3.需要动态地完成的和用户的交互:      a:明确事件源:     ...

  2. js实现级联菜单（没有后台）

    html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" o ...

  3. JS实现级联菜单

    是首先应该添加两个下拉列表并设置id属性来方便操作: <select id="country"> <option>国家</option> < ...

  4. js实现“级联菜单”

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js进阶 9-12 js如何实现级联菜单 （章节测试）

    js进阶 9-12  js如何实现级联菜单 (章节测试) 一.总结 一句话总结: 1.js如何实现级联菜单 ? 二维数组,以第一级菜单的文本值做键,以对应的二级菜单选项的文本做值 2.用哪个属性可以获 ...

  6. Ajax实现动态的二级级联菜单

    今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...

  7. 前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...

  8. Ajax+json实现菜单动态级联

    1:jsp //级联ajax处理函数 function areaChange(){    var areano=document.all("areaNo").value;    v ...

  9. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

随机推荐

  1. dataguru（炼数成金）大数据培训基地印象

    dataguru访问地址:http://f.dataguru.cn/?fromuid=99611 课程优惠码:C4B6  这段时间一直在dataguru(炼数成金)上学习<hadoop数据分析平 ...

  2. Linux下错误的捕获：全局变量errno和strerror()

    经常在调用linux 系统api 的时候会出现一些错误,比方说使用open() write() creat()之类的函数有些时候会返回-1,也就是调用失败,这个时候往往需要知道失败的原因.这个时候使用 ...

  3. [ftp]Centos 创建 sftp 步骤

    来自:http://blog.csdn.net/xinxin19881112/article/details/46831311 1.创建sftp组 groupadd sftp 2.创建一个sftp用户 ...

  4. 使用HttpClient 4.3.4 自动登录并抓取中国联通用户基本信息和账单数据,GET/POST/Cookie

    一.什么是HttpClient? HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 ...

  5. 配置文件keepalived.conf详解

    keepalived.conf       一个功能比较完整的keepalived 的配置文件,其配置文件keepalived.conf 可以包含三个文本块:全局定义块.VRRP 实例定义块及虚拟服务 ...

  6. IplImage 结构解读

    IplImage 结构解读: typedef struct _IplImage { int nSize;                              /* IplImage大小,等于wi ...

  7. 搭建调用 WebService 的 ASP.NET 网站 （VS2010, C#）

    [系统环境]Windows 7 / 2008r2 [软件环境]Visual Studio 2010 [开发语言]C# [感谢]本文是在 <C#开发和调用Web Service> 一文的基础 ...

  8. postgresql数据迁移

    postgresql从库故障准备新库 1,创建用户[root@localhost home]# userdel postgres[root@localhost home]# groupdel post ...

  9. intel显卡笔记本恢复屏幕亮度调整功能

    更新Intel显卡驱动后不能修改屏幕亮度,可以在注册表里面搜索featuretestcontrol,将f000修改为ffff,重启后就可以通过Fn+F4/F5调整屏幕亮度了. 注:此方法适用于带有in ...

  10. python学习之路-day12-mysql && orm

    一.数据库 1.数据库介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数据存储 ...