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

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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值