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="./duoji.js"></script></head><body><div style="margin:100px auto;"><div id="box1"></div> </div><div style="margin:100px auto;"><div 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)}//聲明多級聯動方法類var select = new Function();select.prototype={//定義類屬性init:function(box,addInputClass){this.boxName=box;this.box=$('#'+box); //需要添加元素的容器this.eleClass=addInputClass;//每個事件的定位classthis.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="<option value=''>請選擇</option>";var list=data.data;for(var key in list){option+="<option value='"+key+"'>"+list[key].areaname+"</option>";}$('<div><select name="'+eleClass+'[]" num="0" pnode="'+boxName+'" cname="'+eleClass+'">'+option+'</select></div>').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');//獲取觸發事件者的cnamevar 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.dataif(data.state==='1'){var option="<option value=''>請選擇</option>";for(var key in list){option+="<option value='"+key+"'>"+list[key].areaname+"</option>";}$('<div><select name="'+className+'[]" num="'+num+'" pnode="'+boxName+'" cname="'+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');//獲取觸發事件者的cnamevar 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", {id:'0'},function(data){var option="<option value=''>請選擇</option>";var list=data.data;for(var key in list){option+="<option value='"+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"