Ajax 实现级联下拉框

级联下拉框随处可见，最常见的就是省市的级联，在选择省份后，对应的区县的下拉选择列表的下拉选择内容也会发生相应改变，即所谓的级联下拉框。这种页面异步刷新，无可厚非，AJax是首选。

在做一个管理系统时，有这样一个需求，在选择了仓库后，对应的仓位下拉选择框的内容也需要改变。类似于省市级联。也是通过Ajax实现。

1、jsp页面部分

       jsp页面作为显示层，使用户直接看到的，jsp页面主要定义两个下拉列表框。主要代码如下：

  <tr >
               <td ">存储仓库:</td>
               <td >
                     <select id="save_housename" name="bominfo.houseid.houseid" οnchange="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实现过程大致如上。 如有不正确之处，欢迎各位热爱编程的大虾指正。谢谢!

本文原创，转载请指明处出。