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

HTML部分

"en">

 "UTF-8">
 多级联动封装
 "./css/bootstrap.css" rel="stylesheet">
 
 
 
 
 
"row" style="margin:100px auto;">
 
"col-md-12" id="box1">
 
 
 
"row" style="margin:100px auto;">
 
"col-md-12" id="box2">

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="";

var list=data.data;

for(var key in list){

option+="+list[key].areaname+"";

}

$('

').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="";

for(var key in list){

option+="+list[key].areaname+"";

}

$('

').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="";

var list=data.data;

for(var key in list){

option+="+list[key].areaname+"";

}

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"

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

你可能感兴趣的:(javascript,java,前端)