级联下拉框"/>
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实现过程大致如上。 如有不正确之处,欢迎各位热爱编程的大虾指正。谢谢!
本文原创,转载请指明处出。
更多推荐
Ajax 实现级联下拉框
发布评论