BootStrap无限级分类(无限极分类封装版)
HTML部分
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>多级联动封装</title>
<linkhref="./css/bootstrap.css"rel="stylesheet">
<scriptsrc="./js/jquery.js"></script>
<scriptsrc="./duoji.js"></script>
</head>
<body>
<divclass="row"style="margin:100pxauto;">
<divclass="col-md-12"id="box1"></div>
</div>
<divclass="row"style="margin:100pxauto;">
<divclass="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){
vari=newselect;
returni.init(box,addInputClass)
}
//声明多级联动方法类
varselect=newFunction();
select.prototype={
//定义类属性
init:function(box,addInputClass){
this.boxName=box;
this.box=$('#'+box);//需要添加元素的容器
this.eleClass=addInputClass;//每个事件的定位class
this.first();//新建一个select获取
},
first:function(){
//声明外部变量
varboxName=this.boxName;
vareleClass=this.eleClass;
varbox=this.box;
varobj=this;
$.get("http://127.0.0.1:83/areas",{id:'0'},
function(data){
varoption="<optionvalue=''>请选择</option>";
varlist=data.data;
for(varkeyinlist){
option+="<optionvalue='"+key+"'>"+list[key].areaname+"</option>";
}
$('<divclass="col-md-2pl0"><selectname="'+eleClass+'[]"num="0"pnode="'+boxName+'"cname="'+eleClass+'"class="form-controlinput-sm'+eleClass+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});
},'jsonp');
},
//change事件
change:function(event){
//声明
varboxName=$(event).attr('pnode');//获取触发事件者的pnode
varclassName=$(event).attr('cname');//获取触发事件者的cname
varbox=$("#"+boxName);//获取所有插入盒子的对象
vareleClass=$("."+className);//获取所有Class所在元素组
varnum=eleClass.index($(event))+1;//获取num的值
varid=$(event).val();//获取ajax发送id的头
varobj=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);
varlist=data.data
if(data.state==='1'){
varoption="<optionvalue=''>请选择</option>";
for(varkeyinlist){
option+="<optionvalue='"+key+"'>"+list[key].areaname+"</option>";
}
$('<divclass="col-md-2pl0"><selectname="'+className+'[]"num="'+num+'"pnode="'+boxName+'"cname="'+className+'"class="form-controlinput-sm'+className+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change(this)});
}
}
});
},
//查询当前盒子中的信息
log:function(){
varboxName=$(event).attr('pnode');//获取触发事件者的pnode
varclassName=$(event).attr('cname');//获取触发事件者的cname
varbox=$("#"+boxName);//获取所有插入盒子的对象
vareleClass=$("."+className);//获取所有Class所在元素组
console.log("容器名:"+boxName+"\n触发的class名:"+className);
},
//第一个select框获取信息
getFirstElement:function(){
varmain=$('#'+this.main);
$.get("http://127.0.0.1:83/areas",{id:'0'},
function(data){
varoption="<optionvalue=''>请选择</option>";
varlist=data.data;
for(varkeyinlist){
option+="<optionvalue='"+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"