Ajax動态通路資料庫設計html多級select下拉菜單的方法

getArea(0,$('<select>'));//調用方法，第一個參數是要查詢項目的id，根據資料庫來就好，第二個參數是一個select對象，可以是現有的，也可以生成一個新的在頁面重新整理的時候自動append到body上

function getArea(aid,iselect){
	var ajaxReq;
	iselect.nextAll('select').remove();//将被點選的select後面所有的select菜單移出，準備換新的
	$.get("/ajax/ajaxservlet","area_id="+aid,function(a,b,c){//這裡的位址是servlet位址，可以自己改動

			var text = a.toString();
			if(text.length<3){
				return;
			}
			var select = $('<select>');
			//解析字元串成為josn對象
			var objs = eval("("+text+")");
			//json字元串格式應為[{area_id:'2';area_name:'山東'}{area_id:'3';area_name:'河北'}{}{}]
			for(var i=0;i<objs.length;i++){
				 var option = $('<option>',{'value':objs[i].area_id});
				 option.html(objs[i].area_name);
				 option.appendTo(select);
			}
		
			select.bind('change', function(){setSelect(this)});
			select.appendTo($('body'));//添加到body上
			
			setSelect(select);//把此select傳入，根據此select的第一個option的id遞歸，生成下一個select，直到查到最底層為止
			});
	
}

function setSelect(obj){
    getArea($(obj).children("option:selected").attr('value'),$(obj));
}
//在遞歸時，選擇傳入select标簽底下被選中的option标簽，将這個option标簽的value屬性（存放有本選項的id值）發到伺服器，然後伺服器根據此id查詢此id的子元素