<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多級(jí)聯(lián)動(dòng)封裝</title>
<link href="./css/bootstrap.css" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="./duoji.js"></script>
</head>
<body>
<div class="row" style="margin:100px auto;">
<div class="col-md-12" id="box1"></div> 
</div>
<div class="row" style="margin:100px auto;">
<div class="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){
var i=new select;
return i.init(box,addInputClass)
}
//聲明多級(jí)聯(lián)動(dòng) 方法類(lèi)
var select = new Function();
select.prototype={
//定義類(lèi)屬性
init:function(box,addInputClass){
this.boxName=box;
this.box=$('#'+box); //需要添加元素的容器
this.eleClass=addInputClass;//每個(gè)事件的定位class
this.first();//新建一個(gè)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="<option value=''>請(qǐng)選擇</option>";
var list=data.data;
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
$('<div class="col-md-2 pl0"><select name="'+eleClass+'[]" num="0" pnode="'+boxName+'" cname="'+eleClass+'" class="form-control input-sm '+eleClass+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});
},'jsonp');
},
//change事件
change:function(event){
//聲明
var boxName=$(event).attr('pnode'); //獲取觸發(fā)事件者的pnode 
var className=$(event).attr('cname');//獲取觸發(fā)事件者的cname
var box =$("#"+boxName); //獲取所有插入盒子的對(duì)象
var eleClass=$("."+className); //獲取所有Class所在元素組
var num=eleClass.index($(event))+1; //獲取num的值
var id=$(event).val(); //獲取ajax發(fā)送id的頭
var obj=this; //代表這個(gè)方法
//清除 后續(xù)添加的新的元素
eleClass.each(function(){
//這里的this 代表eleClass 遍歷時(shí)的單個(gè)對(duì)象
//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());
*/
//循環(huán)ajax方法
$.ajax({
type: "get",
dataType:"jsonp",
url: "http://127.0.0.1:83/areas",
data: {id:id},
sync: false,//設(shè)置為同步
success: function(data){
//console.log(data);
var list =data.data
if(data.state==='1'){
var option="<option value=''>請(qǐng)選擇</option>";
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
$('<div class="col-md-2 pl0"><select name="'+className+'[]" num="'+num+'" pnode="'+boxName+'" cname="'+className+'" class="form-control input-sm '+className+'" >'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change(this)});
}
}
});
},
//查詢(xún)當(dāng)前盒子中的信息
log:function(){
var boxName=$(event).attr('pnode'); //獲取觸發(fā)事件者的pnode 
var className=$(event).attr('cname');//獲取觸發(fā)事件者的cname
var box =$("#"+boxName); //獲取所有插入盒子的對(duì)象
var eleClass=$("."+className); //獲取所有Class所在元素組
console.log("容器名:"+boxName+"\n 觸發(fā)的class名:"+className);
},
//第一個(gè)select框獲取信息
getFirstElement:function(){
var main=$('#'+this.main);
$.get("http://127.0.0.1:83/areas", {id:'0'},
function(data){
var option="<option value=''>請(qǐng)選擇</option>";
var list=data.data;
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
main.html(option);
},'jsonp');
}
}
})(jQuery)

后端提供的數(shù)據(jù)類(lèi)型：json

如果有數(shù)據(jù)：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: "內(nèi)蒙古自治區(qū)", pid: "0", shortname: "內(nèi)蒙古", 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"

如果沒(méi)有數(shù)據(jù) state=0

例子：

state:"0"

您可能感興趣的文章: