git地址：https://github.com/zhangjiahao93/jQ.select

HTML部分

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>多级联动封装</title>

    <link href="./css/bootstrap.css" rel="stylesheet">

    <script src="./js/jquery.js"></script>

    <script src="./js/duoji.js"></script>

</head>

<body>

<div class="row" style="margin:100px auto;">

    <div class="col-md-12" id="box"></div>

</div>

<div class="row" style="margin:100px auto;">

    <div class="col-md-12" id="box2"></div>

</div>

<script>

    //基础用法

    $.select({boxName:'box'})

    //详细配置

    $.select({

        boxName:'box2',

        className:'area2',

        url:'./area.php',

        type:'get',

        dataType:'json',

    })

    /*

        boxName:'box',      //容器名

        className:'area',    //每个事件的定位class

        url:'./area.php',    //请求的地址

        type:'get',            //请求传输方式

        dataType:'json',    //使用jsonp方式

    */

</script>

</body>

</html>

duoji.js 代码

(function ($) {

    $.select=function(config){

        var i=new select;

        return i.init(config)

    }

    //声明多级联动 方法类

    var select = new Function();

    select.prototype={

        //定义类属性

        init:function(config){

            /**

             * 这些是预定义属性

             */

            this.boxName='box';                //容器名

            this.className='area';          //每个事件的定位class

            this.url='./area.php';          //默认选项

            //this.classObj=$("."+className); //每个事件的定位class 的对象 --基本没用所以废除了

            this.type= 'get';                //传输方式

            this.dataType='json';             //使用jsonp方式

            //解包解出配置信息 覆盖上面的属性

            for(var key in config){

                this[key] = config[key];

                //console.log(key+':'+config[key]+' this.key:'+this.key);

            }

            //console.log(this.boxName);

            var boxName=this.boxName;

            this.box=$('#'+boxName);        //需要添加元素的容器

            //最后创建

            this.create();                    //新建一个select获取

        },

        create:function(){

            //声明外部变量

            var boxName=this.boxName;

            var className= this.className;

            var box=this.box;

            var url=this.url;

            var obj=this;

            var type=this.type;

            var dataType=this.dataType;

            $.ajax({

              type: type,

              dataType:dataType,

              url: url,

              data: {id:'0'},

              sync: true,//设置异步模式

              success: function(data){

                var option="<option value=''>请选择</option>";

                var list=data.data;

                for(var key in list){

                    option+="<option value='"+key+"'>"+list[key].areaname+"</option>";

                }

                $('<div class="col-md-2 pl0"><select name="'+className+'[]" num="0" class="form-control input-sm '+className+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});

              }

           });

        },

        //change事件

        change:function(event){

            //声明 

            var box =this.box;                    //获取所有插入盒子的对象

            var className=this.className        //获取模型的className

            var classObj=$('.'+className);        //获取所有Class所在元素组 这里要在注意 重新生成classObj 因为他是动态的

            var num=classObj.index($(event))+1; //获取num的值

            //console.log(classObj.index($(event)));

            var id=$(event).val();                //获取ajax发送id的头

            var obj=this;                        //代表这个方法

            var url=this.url;                    //url地址            

            var type = this.type;                //传输方式

            var dataType=this.dataType;            //数据类型

            //清除 后续添加的新的元素

            classObj.each(function(){

                //console.log(event);

                //这里的this 代表eClass 遍历时的单个对象

                if($(this).attr('num')>$(event).attr('num')){

                    $(this).parent().remove();

                }

            });

            //循环ajax方法

            $.ajax({

              type: type,

              dataType:dataType,

              url: url,

              data: {id:id},

              sync: true,//设置异步模式

              success: function(data){

                //console.log(data);

                var list =data.data

                if(data.state==='1'){

                    var option="<option value=''>请选择</option>";

                    for(var key in list){

                        option+="<option value='"+key+"'>"+list[key].areaname+"</option>";

                    }

                    $('<div class="col-md-2 pl0"><select name="'+className+'[]" num="'+num+'" class="form-control input-sm '+className+'" >'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change(this)});

                 }

              }

           });

        },

        //查询当前盒子中的信息

        log:function(){

            var boxName=$(event).attr('pnode');  //获取触发事件者的pnode

            var className=$(event).attr('cname');//获取触发事件者的cname

            var box =$("#"+boxName);            //获取所有插入盒子的对象

            var className=$("."+className);        //获取所有Class所在元素组

            console.log("容器名:"+boxName+"\n 触发的class名:"+className);

        },

    }

})(jQuery)

后端提供的数据类型：json

如果有数据：state=1

例子：

data:{

110000:{id: "110000", areaname: "北京", pid: "0", shortname: "北京", level: "1", position: "tr_0", sort: "1"}

120000:{id: "120000", areaname: "天津", pid: "0", shortname: "天津", level: "1", position: "tr_0", sort: "2"}

130000:{id: "130000", areaname: "河北省", pid: "0", shortname: "河北", level: "1", position: "tr_0", sort: "3"}

140000:{id: "140000", areaname: "山西省", pid: "0", shortname: "山西", level: "1", position: "tr_0", sort: "4"}

150000:{id: "150000", areaname: "内蒙古自治区", pid: "0", shortname: "内蒙古", level: "1", position: "tr_0", sort: "5"}

.....

},

state:"1"

如果没有数据 state=0

例子：

state:"0"

最后附上下载地址:包含php服务端的实例yo~

http://pan.baidu.com/s/1i5DG70D

bootstrap无限级分类 jq拓展 之前的无限级分类的封装版~的更多相关文章

  1. OC的类别(分类)和拓展

    一.分类: 1.适用范围      当你已经封装好了一个类(也可能是系统类.第三方库),不想在改动这个类了,可是随着程序功能的增加需要在类中增加一个方法,这时我们不必修改主类,只需要给你原来的类增加一 ...

  2. day81:luffy:课程分类页面&课程信息页面&指定分类显示课程信息&分页显示课程信息

    目录 1.构建课程前端初始页面 2.course后端的准备工作 3.后端实现课程分类列表接口 4.前端发送请求-获取课程分类信息 5.后端实现课程列表信息的接口 6.前端显示列表课程信息 7.按照指定 ...

  3. 多分类问题中，实现不同分类区域颜色填充的MATLAB代码（demo：Random Forest）

    之前建立了一个SVM-based Ordinal regression模型,一种特殊的多分类模型,就想通过可视化的方式展示模型分类的效果,对各个分类区域用不同颜色表示.可是,也看了很多代码,但基本都是 ...

  4. Spark ML下实现的多分类adaboost+naivebayes算法在文本分类上的应用

    1. Naive Bayes算法 朴素贝叶斯算法算是生成模型中一个最经典的分类算法之一了,常用的有Bernoulli和Multinomial两种.在文本分类上经常会用到这两种方法.在词袋模型中,对于一 ...

  5. APP的功能分类及打包与发布的分类方式

    智能手机的出现改变了我们的生活,同时各种各样的APP充斥在我们的手机当中.那么我先现在在来熟悉一下APP的分类及其用途:工具类.社交类.信息类.娱乐类.生活类等几大类.我么了解了APP的用途分类,那么 ...

  6. foreach、count、explode（对无限级分类的语法注释-显示无限级效果）

    foreach ($array as $key => $value) foreach仅能用于数组. 每次循环中,当前单元的键名也会在每次循环中被赋给变量$key. 当前单元的值被赋给$value ...

  7. jQuery：用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码

    最近在做前端开发项目中,需要用到树形结构.在网上查阅到了许多相应资源.其中觉得lightTreeview是一款非常不错的JQ树形分类菜单代码,结构简单,支持多级.还有详细的参数可以配置,以实现各种效果 ...

  8. Tensorflow二分类处理dense或者sparse(文本分类)的输入数据

    这里做了一些小的修改,感谢谷歌rd的帮助,使得能够统一处理dense的数据,或者类似文本分类这样sparse的输入数据.后续会做进一步学习优化,比如如何多线程处理. 具体如何处理sparse 主要是使 ...

  9. ECSHOP分类页面筛选功能（按分类下子分类和品牌筛选）

    其实分类页面里面本来就有相关的品牌.属性.分类的筛选功能在category.php和模板加上相应的功能即可 1.读出当前分类的所有下级分类 $chlidren_category = $GLOBALS[ ...

随机推荐

  1. windows server 2008 r2 企业版 hyper v做虚拟化的相关问题处理

    windows server 2008 r2 企业版 hyper v做虚拟化的相关问题处理 今天在dell r710 上用windows server 2008 r2企业版hyper v 做虚拟化,添 ...

  2. LINQ系列：Linq to Object限制操作符

    1. Where 限制操作符Where用于过滤序列,按照提供的逻辑对序列中的数据进行过滤.Where可以出现多次. 1.1 原型定义 public static IEnumerable<TSou ...

  3. SQL Server中的高可用性（1）----高可用性概览

        自从SQL Server 2005以来,微软已经提供了多种高可用性技术来减少宕机时间和增加对业务数据的保护,而随着SQL Server 2008,SQL Server 2008 R2,SQL ...

  4. <nginx.conf> nginx用户权限

    Nginx用户权限 在nginx.conf文件的第一行一般是设置用户的地方(编译安装nginx时的参数--user=<user>也是指定用户的地方),如 user www www; 如不指 ...

  5. Create views of OpenCASCADE objects in the Debugger

    Create views of OpenCASCADE objects in the Debugger eryar@163.com Abstract. The Visual Studio Natvis ...

  6. Java设计模式之单例模式（Singleton）

    前言: 在总结okHttp的时候,为了管理网络请求使用到了单例模式,晚上实在没啥状态了,静下心来学习总结一下使用频率最高的设计模式单例模式. 单例模式: 单例模式确保某个类只有一个实例,而且自行实例化 ...

  7. AngularJS之代码风格36条建议【一】（九）

    前言 其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJ ...

  8. 窥探Swift之函数与闭包的应用实例

    今天的博客算是比较基础的,还是那句话,基础这东西在什么时候都是最重要的.说到函数,只要是写过程序就肯定知道函数是怎么回事,今天就来讨论一下Swift中的函数的特性以及Swift中的闭包.今天的一些小实 ...

  9. 关于 android 的 view.getLeft(), getRight(), getTop(), getBottom() 的一些疑惑(坑)解答

    (原创) 今天在做下滑刷新的时候碰到 view 的四个 get 函数有点特别,具体遇到的问题如下,经反复测试和查找资料,填坑如下: 1,为什么我有时候在使用getLeft(), getRight(), ...

  10. 1Z0-053 争议题目解析681

    1Z0-053 争议题目解析681 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 681.The environmental variable ORACLE-BASE is set ...