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. Data Profiling Task

    Data Profiling Task 是用于收集数据的Metadata的Task,在使用ETL处理数据之前,应该首先检查数据质量,对数据进行分析,这将对Table Schema的设计结构和生成ETL ...

  2. Security6：授予权限的思路和一般步骤

    思路是:Grants permissions on a securable to a principal. The general concept is to GRANT <some permi ...

  3. C#设计模式系列：建造者模式（Builder）

    1.建造者模式简介 1.1>.定义 建造者模式(Builder)将复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 1.2>.使用频率 中低 1.3>.原型模式应用 ...

  4. WPF做验证码，小部分修改原作者内容

    原文地址:http://www.cnblogs.com/tianguook/p/4142346.html 首先感谢aparche大牛的帖子,因为过两天可能要做个登录的页面,因此,需要用到验证码,从而看 ...

  5. 理解javascript中的浏览器窗口——窗口基本操作

    × 目录 [1]窗口位置 [2]窗口大小 [3]打开窗口[4]关闭窗口 前面的话 BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是wi ...

  6. js+css实现骰子的随机转动

    网上找的例子,然后增添了新的东西,在这里展示一下...... 效果图预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  7. linux管理进程的链表

    linux2.6.11的内核中,为了方便管理linux的进程,主要建了5种linux链表.每个链表节点之间的互联有两种方式,一种是hash节点之间的互联,通过hlist_node的数据结构来实现:另一 ...

  8. ECharts使用心得

    ECharts百度旗下图标插件,在展示地图.雷达图等方面有很好的支持. 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的dat ...

  9. SQLServer 2012重启服务后，自增1的标识列一次增长了1000左右

    sql2012我重启了下sql服务,然后自增列Id居然一下子跳了1000,怎么回事啊?   如果第一条数据是1,我重启服务,再添加就是1001,如果继续添加不重启服务的话就是1002,如果再次重启的话 ...

  10. 软件开发常用设计模式—单例模式总结（c++版）

    单例模式:就是只有一个实例. singleton pattern单例模式:确保某一个类在程序运行中只能生成一个实例,并提供一个访问它的全局访问点.这个类称为单例类.如一个工程中,数据库访问对象只有一个 ...