級聯下拉框隨處可見，最常見的就是省市的級聯，在選擇省份後，對應的區縣的下拉選擇列表的下拉選擇內容也會發生相應改變，即所謂的級聯下拉框。這種頁面非同步重新整理，無可厚非，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實現的，主要程式碼如下：

   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]);
			}
    		
    	}

     Ajax的主要實現過程這裡不再贅述，這裡需要注意的是url，這裡的url是action裡的方法，doListByHouseid.action是根據倉庫ID來查詢倉位的方法，cwgl-*是strut.xml配置檔案中的action中的name屬性，當在頁面呼叫changeBin時，如果沒有反應，可以通過瀏覽器的除錯工具來看看url的路徑是否正確。

3，doListByHouseid.action的實現

      doListByHouseid是Ajax呼叫實現方法。主要程式碼如下：

	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;
	}

     這裡根據倉庫編號來查詢倉位資訊，然後將倉位資訊進行拼接，然後返回倉位資訊字串，在changeBin()中也會看到將結果字串擷取在賦值給select 的option，

好了，級聯的Ajax實現過程大致如上。 如有不正確之處，歡迎各位熱愛程式設計的大蝦指正。謝謝!

本文原創，轉載請指明處出。