BootStrap无限级分类(无限极分类封装版)

2019-11-20 09:08:50

字体：大中小

来源：转载

供稿：网友

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;//每个事件的定位classthis.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 class="col-md-2 pl0"><select name="'+eleClass+'[]" num="0" pnode="'+boxName+'" cname="'+eleClass+'" class="form-control input-sm '+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');//获取触发事件者的cnamevar 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.dataif(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+'" pnode="'+boxName+'" cname="'+className+'" 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');//获取触发事件者的cnamevar 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"

上一篇：jQuery基于BootStrap样式实现无限极地区联动

下一篇：jquery 动态合并单元格的实现方法