ajax实现级联下拉菜单

前端之家收集整理的这篇文章主要介绍了ajax实现级联下拉菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ajax实现级联下拉菜单非常简单,下面是一个用ajax实现的省市级联的下拉菜单

jsp中在<select>中添加onchange事件,触发该事件调用实现ajax的js:

<div>
	<form action="Pcs" method="post">
		所在省:<select name="pro" id="pro" onchange="chCity();">
				<option>--请选择--</option>
				<option value="beijing">北京市</option>
				<option value="shandong">山东省</option>
				<option value="hebei">河北省</option>				
			 </select>
		所在市:<select name="cit" id="cit">
				<option>--请选择--</option>				
			 </select><br>
					
	</form>
</div>

正常的下拉菜单选项是在数据库取出来的,为了方便,我把省直接写在里面;所在市除了“选择”目前没有实际的option;


js中实现ajax:

function chCity(){
	var pro=document.all("pro").value;	
	if(window.XmlHttpRequest){
		xmlHttpRequest=new XmlHttpRequest();
	}else{
		xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
	}	
	xmlHttpRequest.onreadystatechange=callBack;
	var url="Pcs";
	xmlHttpRequest.open("post",url,true);
	xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlHttpRequest.send("pro="+pro+"&timeStamp="+(new Date()).getTime());	
}
//回调函数
function callBack(){
	
	if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){	
		var result=xmlHttpRequest.responseText;
		result=result.replace(/(^\s*)|(\s*$)/g,"");
		var city=result.split("|");
		
		var citySelect=document.all("cit");
	
		for(var i=citySelect.options.length-1;i>=0;i--){
			
			citySelect.options.remove(i);
		}
		for(var i=0;i<city.length;i++){
			var vn=city[i].split(",");
			var cvalue=vn[0];
			var cname=vn[1];
			var opt=document.createElement("option");
			citySelect.options.add(opt);
			opt.value=cvalue;
			opt.innerHTML=cname;
		}
	}
}

说明:

document.all("pro").value,根据name或id取值,这里用来获取select选项的value值;

把选择的option的value通过ajax提交到后台,先不看回调函数


后台java程序:

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class Pcs extends HttpServlet {
	
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
		doPost(request,response);
	}


	protected void doPost(HttpServletRequest request,IOException {
		request.equals("utf-8");
		response.setCharacterEncoding("utf-8");
		String pro=request.getParameter("pro");		
		String cities="";
		if(pro.equalsIgnoreCase("beijing")){
			cities="haidian,海淀|changping,昌平|chaoyang,朝阳";
		}else if(pro.equalsIgnoreCase("shandong")){
			cities="jinan,济南|dezhou,德州|qingdao,青岛";
		}else if(pro.equalsIgnoreCase("hebei")){
			cities="shijiazhuang,石家庄|langfang,廊坊|xingtai,邢台";
		}else{
			cities=",--请选择--";
		}
		PrintWriter out=response.getWriter();
		out.print(cities);
		out.flush();
		out.close();

		
	}
	
	
}

说明:

正常的市是根据省在数据库查询出来的,为了方便我直接写在了字符串中;

在回调函数中我返回的是有一定格式的字符串,再在回调函数里用split分割;

注意最后一个else不能省掉,不然会在市里可能出现undefinded;



关于回调函数的说明:

var citySelect=document.all("cit");拿到市的select对象;

citySelect.options得到所有option对象,从后向前循环删掉option(因为这是我前一个选择出来的市,换了省市就得换);

var city=result.split("|");获取所有市(option的value,option的文本子节点),进行遍历;

var vn=city[i].split(",");
var cvalue=vn[0];
var cname=vn[1]; 获取option的value和文本节点

创建元素节点 option,并为select加子节点;

给option加value和文本节点;

原文链接:https://www.f2er.com/ajax/163081.html

猜你在找的Ajax相关文章