你的位置:首页 > Java教程

[Java教程]bootstrap无限级分类 jq拓展 之前的无限级分类的封装版~


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="./duoji.js"></script></head><body>  <div class="row" style="margin:100px auto;">    <div class="col-md-12" id="box1"></div>   </div>  <div class="row" style="margin:100px auto;">    <div class="col-md-12" id="box2"></div>   </div>  <script>    //容器名,name名(新生成的class名)    $.select('box1','area1');    $.select('box2','area2');  </script></body></html>

duoji.js 代码

(function ($) {  $.select=function(box,addInputClass){    var i=new select;    return i.init(box,addInputClass)  }  //声明多级联动 方法类  var select = new Function();  select.prototype={    //定义类属性    init:function(box,addInputClass){      this.boxName=box;      this.box=$('#'+box);    //需要添加元素的容器      this.eleClass=addInputClass;//每个事件的定位class      this.first();//新建一个select获取     },        first:function(){      //声明外部变量      var boxName=this.boxName;      var eleClass= this.eleClass;      var box=this.box;      var obj=this;            $.get("http://127.0.0.1:83/areas", {id:'0'},        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 ><select name="'+eleClass+'[]" num="0" pnode="'+boxName+'" cname="'+eleClass+'" >'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});              },'jsonp');    },        //change事件    change:function(event){      //声明      var boxName=$(event).attr('pnode'); //获取触发事件者的pnode             var className=$(event).attr('cname');//获取触发事件者的cname            var box =$("#"+boxName);      //获取所有插入盒子的对象            var eleClass=$("."+className);    //获取所有Class所在元素组      var num=eleClass.index($(event))+1; //获取num的值            var id=$(event).val();        //获取ajax发送id的头            var obj=this;            //代表这个方法            //清除 后续添加的新的元素      eleClass.each(function(){        //这里的this 代表eleClass 遍历时的单个对象        //console.log($(this).attr('num'));        //console.log($().attr('num'));        if($(this).attr('num')>$(event).attr('num')){          $(this).parent().remove();        }      });      /*      console.log(boxName);      console.log(className);      console.log($(event));      console.log($(event).val());      */      //循环ajax方法      $.ajax({       type: "get",       dataType:"jsonp",       url: "http://127.0.0.1:83/areas",       data: {id:id},       sync: false,//设置为同步       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 ><select name="'+className+'[]" num="'+num+'" pnode="'+boxName+'" cname="'+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 eleClass=$("."+className);    //获取所有Class所在元素组      console.log("容器名:"+boxName+"\n 触发的class名:"+className);          },        //第一个select框获取信息    getFirstElement:function(){      var main=$('#'+this.main);      $.get("http://127.0.0.1:83/areas", {id:'0'},        function(data){        var option="<option value=''>请选择</option>";        var list=data.data;        for(var key in list){          option+="<option value='"+key+"'>"+list[key].areaname+"</option>";        }        main.html(option);     },'jsonp');    }  }  })(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"}210000:{id: "210000", areaname: "辽宁省", pid: "0", shortname: "辽宁", level: "1", position: "tr_0", sort: "6"}220000:{id: "220000", areaname: "吉林省", pid: "0", shortname: "吉林", level: "1", position: "tr_0", sort: "7"}230000:{id: "230000", areaname: "黑龙江省", pid: "0", shortname: "黑龙江", level: "1", position: "tr_0", sort: "8"}310000:{id: "310000", areaname: "上海", pid: "0", shortname: "上海", level: "1", position: "tr_0", sort: "9"}320000:{id: "320000", areaname: "江苏省", pid: "0", shortname: "江苏", level: "1", position: "tr_0", sort: "10"}330000:{id: "330000", areaname: "浙江省", pid: "0", shortname: "浙江", level: "1", position: "tr_0", sort: "11"}.....},state:"1"

如果没有数据 state=0

例子:

state:"0"