Ajax 實現級聯下拉框
阿新 • • 發佈:2019-01-05
級聯下拉框隨處可見,最常見的就是省市的級聯,在選擇省份後,對應的區縣的下拉選擇列表的下拉選擇內容也會發生相應改變,即所謂的級聯下拉框。這種頁面非同步重新整理,無可厚非,AJax是首選。
在做一個管理系統時,有這樣一個需求,在選擇了倉庫後,對應的倉位下拉選擇框的內容也需要改變。類似於省市級聯。也是通過Ajax實現。
1、jsp頁面部分
jsp頁面作為顯示層,使使用者直接看到的,jsp頁面主要定義兩個下拉列表框。主要程式碼如下:
<tr > <td ">儲存倉庫:</td> <td > <select id="save_housename" name="bominfo.houseid.houseid" onchange="changeBin()"> <option value="" selected="selected"></option> <s:iterator value="#session.loginwareList" var="loginwareList" > <option value="${loginwareList.houseid}">${loginwareList.housename}</option> </s:iterator> </select> </td> <td >儲存倉位:</td> <td > <SELECT id="save_binname" name="bominfo.binid.binid"> </SELECT> </td> </tr>
這裡定義了一個“儲存倉庫”下拉框,有定義了一個倉位下拉框,其中下拉框的option是通過struts標籤從資料庫動態生成的。主要用到struts的迴圈標籤,其中倉庫下拉框實現了onchange方法,定義的changeBin就是當倉庫下拉框發生改變時所觸發的事件。
在儲存倉位的下拉列表中並沒有定義option元素,這個主要是通過Ajax來動態生成的。
2、changeBin方法的實現
changeBin方法是通過Ajax實現的,主要程式碼如下:
Ajax的主要實現過程這裡不再贅述,這裡需要注意的是url,這裡的url是action裡的方法,doListByHouseid.action是根據倉庫ID來查詢倉位的方法,cwgl-*是strut.xml配置檔案中的action中的name屬性,當在頁面呼叫changeBin時,如果沒有反應,可以通過瀏覽器的除錯工具來看看url的路徑是否正確。function changeBin(){ var ajax; var houseId = document.getElementById("save_housename").value; <span style="color:#FF0000;">var url = "cwgl-doListByHouseid.action?houseid="+escape(houseId);</span> try{ ajax = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ ajax = new XMLHttpRequest(); } ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ delBin(); var msg = ajax.responseText; var list = msg.split("%"); for ( var i = 0; i < list.length; i=i+2) { var option = document.createElement("option"); var txtNode = document.createTextNode(list[i+1]); option.value=list[i]; option.appendChild(txtNode); document.getElementById("save_binname").appendChild(option); } } } }; ajax.open("POST",url,true); ajax.send(null); }; function delBin(){ var list = document.getElementById("save_binname").childNodes; for ( var i = (list.length-1); i >= 0; i--) { document.getElementById("save_binname").removeChild(list[i]); } }
3,doListByHouseid.action的實現
doListByHouseid是Ajax呼叫實現方法。主要程式碼如下:
這裡根據倉庫編號來查詢倉位資訊,然後將倉位資訊進行拼接,然後返回倉位資訊字串,在changeBin()中也會看到將結果字串擷取在賦值給select 的option,public String doListByHouseid() throws Exception { response.setContentType("text/html;charset=utf-8"); String houseid = request.getParameter("houseid"); int newhouseid = Integer.parseInt(houseid); List<Bininfo> blist = binBiz.listByHouseid(newhouseid); PrintWriter out = response.getWriter(); String responsemsg = ""; if(blist.size()==0){ responsemsg = " % "; }else{ for (Bininfo bin : blist) { responsemsg += bin.getBinid() + "%"; responsemsg += bin.getBinname() + "%"; } if (responsemsg.indexOf('%') != -1) { responsemsg = responsemsg.substring(0, responsemsg.lastIndexOf("%")); } } out.print(responsemsg); return NONE; }
好了,級聯的Ajax實現過程大致如上。
如有不正確之處,歡迎各位熱愛程式設計的大蝦指正。謝謝!
本文原創,轉載請指明處出。