HTML部分
rush:js;">
Meta charset="UTF-8">
多级联动封装
duoji.js 代码
rush: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+="";
}
$('
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
例子：
rush:js;">
data:{
110000:{id: "110000",areaname: "北京",pid: "0",shortname: "北京",level: "1",position: "tr_0",sort: "1"}
120000:{id: "120000",areaname: "天津",shortname: "天津",sort: "2"}
130000:{id: "130000",areaname: "河北省",shortname: "河北",sort: "3"}
140000:{id: "140000",areaname: "山西省",shortname: "山西",sort: "4"}
150000:{id: "150000",areaname: "内蒙古自治区",shortname: "内蒙古",sort: "5"}
210000:{id: "210000",areaname: "辽宁省",shortname: "辽宁",sort: "6"}
220000:{id: "220000",areaname: "吉林省",shortname: "吉林",sort: "7"}
230000:{id: "230000",areaname: "黑龙江省",shortname: "黑龙江",sort: "8"}
310000:{id: "310000",areaname: "上海",shortname: "上海",sort: "9"}
320000:{id: "320000",areaname: "江苏省",shortname: "江苏",sort: "10"}
330000:{id: "330000",areaname: "浙江省",shortname: "浙江",sort: "11"}
.....
},state:"1"
如果没有数据 state=0
例子：
state:"0"
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
