git地址：https://github.com/zhangjiahao93/jQ.select
HTML部分
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多級聯動封裝</title> <link href="./css/bootstrap.css" rel="stylesheet"> <script src="./js/jquery.js"></script> <script src="./js/duoji.js"></script> </head> <body> <div class="row" style="margin:100px auto;"> <div class="col-md-12" id="box"></div> </div> <div class="row" style="margin:100px auto;"> <div class="col-md-12" id="box2"></div> </div> <script> //基礎用法 $.select({boxName:'box'}) //詳細配置 $.select({ boxName:'box2', className:'area2', url:'./area.php', type:'get', dataType:'json', }) /* boxName:'box', //容器名 className:'area', //每個事件的定位class url:'./area.php', //請求的地址 type:'get', //請求傳輸方式 dataType:'json', //使用jsonp方式 */ </script> </body> </html>
duoji.js 代碼
(function ($) { $.select=function(config){ var i=new select; return i.init(config) } //聲明多級聯動 方法類 var select = new Function(); select.prototype={ //定義類屬性 init:function(config){ /** * 這些是預定義屬性 */ this.boxName='box'; //容器名 this.className='area'; //每個事件的定位class this.url='./area.php'; //默認選項 //this.classObj=$("."+className); //每個事件的定位class 的對象 --基本沒用所以廢除了 this.type= 'get'; //傳輸方式 this.dataType='json'; //使用jsonp方式 //解包解出配置信息 覆蓋上面的屬性 for(var key in config){ this[key] = config[key]; //console.log(key+':'+config[key]+' this.key:'+this.key); } //console.log(this.boxName); var boxName=this.boxName; this.box=$('#'+boxName); //需要添加元素的容器 //最后創建 this.create(); //新建一個select獲取 }, create:function(){ //聲明外部變量 var boxName=this.boxName; var className= this.className; var box=this.box; var url=this.url; var obj=this; var type=this.type; var dataType=this.dataType; $.ajax({ type: type, dataType:dataType, url: url, data: {id:'0'}, sync: true,//設置異步模式 success: function(data){ var option="<option value=''>請選擇</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="'+className+'[]" num="0" class="form-control input-sm '+className+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))}); } }); }, //change事件 change:function(event){ //聲明 var box =this.box; //獲取所有插入盒子的對象 var className=this.className //獲取模型的className var classObj=$('.'+className); //獲取所有Class所在元素組 這里要在注意 重新生成classObj 因為他是動態的 var num=classObj.index($(event))+1; //獲取num的值 //console.log(classObj.index($(event))); var id=$(event).val(); //獲取ajax發送id的頭 var obj=this; //代表這個方法 var url=this.url; //url地址 var type = this.type; //傳輸方式 var dataType=this.dataType; //數據類型 //清除 后續添加的新的元素 classObj.each(function(){ //console.log(event); //這里的this 代表eClass 遍歷時的單個對象 if($(this).attr('num')>$(event).attr('num')){ $(this).parent().remove(); } }); //循環ajax方法 $.ajax({ type: type, dataType:dataType, url: url, data: {id:id}, sync: true,//設置異步模式 success: function(data){ //console.log(data); var list =data.data if(data.state==='1'){ var option="<option value=''>請選擇</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+'" class="form-control input-sm '+className+'" >'+option+'</select></div>').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 className=$("."+className); //獲取所有Class所在元素組 console.log("容器名:"+boxName+"\n 觸發的class名:"+className); }, } })(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"} ..... }, state:"1"
如果沒有數據 state=0
例子：
state:"0"
最后附上下載地址:包含php服務端的實例yo~
http://pan.baidu.com/s/1i5DG70D