HTML部分
Meta charset="UTF-8">
多级联动封装
duoji.js 代码
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+="";
}
$('
BoxName+'" cname="'+eleClass+'" class="form-control input-sm '+eleClass+'">'+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",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+="";
}
$(''+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);
$.get("http://127.0.0.1:83/areas",function(data){
var option="";
var list=data.data;
for(var key in list){
option+="";
}
main.html(option);
},'jsonp');
}
}
})(jQuery)
后端提供的数据类型：json
如果有数据：state=1
例子：
如果没有数据 state=0
例子：
state:"0"
原文链接：https://www.f2er.com/bootstrap/46290.html