Ajax動態訪問資料庫設計html多級select下拉選單的方法
阿新 • • 發佈:2019-01-10
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的子元素