Ajax 实现级联下拉框

级联下拉框"/>

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实现过程大致如上。 如有不正确之处，欢迎各位热爱编程的大虾指正。谢谢!

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