html无限级分类前端输出输出,BootStrap无限级分类(无限极分类封装版)

(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;

function(data){

var option="请选择";

var list=data.data;

for(var keyin list){

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

}

$('

'+option+'

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

data: {id:id},

sync:false,//设置为同步

success:function(data){

//console.log(data);

var list =data.data

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

var option="请选择";

for(var keyin list){

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

}

$('

'+option+'

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

function(data){

var option="请选择";

var list=data.data;

for(var keyin list){

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

}

main.html(option);

},'jsonp');

}

}

})(jQuery)