DWR做的四级联动下拉菜单

最近做公司项目，其中要做一个市、区、街道、小区的四级联动下拉框，学习了DWR做的。

首先下载DWR.jar，并导入到工程

配置web.xml，添加如下代码：

<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>
			org.directwebremoting.servlet.DwrServlet
		</servlet-class>
		
		
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>crossDomainSessionSecurity</param-name>
			<param-value>false</param-value>
		</init-param>
		<init-param>
			<param-name>allowScriptTagRemoting</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>
				allowGetForSafariButMakeForgeryEasier
			</param-name>
			<param-value>true</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/js/dwr/*</url-pattern> //dwr运行路径
	</servlet-mapping>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
  <allow>
    <create creator="new" javascript="dwrDAO"> 
    	<param name="class" value="cn.com.enorth.volunteer.common.DwrDAO"/> <!--javascript的值与jsp页面中的DWR名称相同--!>
    </create>
    
  </allow>
</dwr>

public JSONArray getSelect(long parentId) throws SQLException {
		List<Map<String,String>> result=new ArrayList<Map<String,String>>();
		List<Address> list = new AddressDao().getArea(parentId);
		
		for(Address address : list){
			Map<String,String> map = new LinkedHashMap<String,String>(); 
			map.put("addressId",String.valueOf(address.getAddressId()));
			map.put("addressName",address.getAddressName());
			result.add(map);
		}
		System.out.println(result);
		JSONArray ja = new JSONArray().fromObject(result);
		String s=new JSONArray().fromObject(result).toString();
		
		return ja;
	}

最后编写jsp页面

<script src="js/dwr/engine.js" type="text/javascript"></script>
<script src="js/dwr/util.js" type="text/javascript"></script> <%--导入dwr.jar中js--%>
<script src="js/dwr/interface/dwrDAO.js" type="text/javascript"></script> <%--DWR自动生成的js，路径与dwr.xml一致--%>

<script type="text/javascript">
	function change1() {
		$("#val").val($("#city").val());
		var city = $("#city").val();
		if (city == -1) {
			$("#area").empty();
			$("#street").empty();
			$("#place").empty();
			var option1 = $("<option>").text("请选择").val(0);
			$("#area").append(option1);
			var option2 = $("<option>").text("请选择").val(0);
			$("#street").append(option2);
			var option3 = $("<option>").text("请选择").val(0);
			$("#place").append(option3);
		} else {
			dwrDAO.getSelect(city,areaCallback);
		}
	}
	<%--回滚函数，打开当前下拉框同时关联下一级--%>
	function areaCallback(area) {
		$("#area").empty();
		if (area.length == 0 || $("#city").val() == -1) {
			var option = $("<option>").text("请选择").val(0);
			$("#area").append(option);
			$("#val").val($("#city").val()); <%--提交当前一级下拉框的addressId的值--%>
		} else {
			var option = $("<option>").text("请选择").val(0);
			$("#area").append(option);
			for ( var i = 0; i < area.length; i++) {
				var value = area[i]["addressId"];
				var name = area[i]["addressName"];
				option = $("<option>").text(name).val(value);
				$("#area").append(option);
			}
		}
	}
	<%--检查，不选到最后一级不予提交--%>
	function check(){
		if(document.getElementById("place").value == 0){
			alert("请将地点选到第四级");
			return false;
		}else{
			return true;
		}
	}
	function change2() {
		$("#val").val($("#area").val());
		var area = $("#area").val();
		if (area == 0) {
			$("#street").empty();
			$("#place").empty();
			var option = $("<option>").text("请选择").val(0);
			$("#street").append(option);
			var option3 = $("<option>").text("请选择").val(0);
			$("#place").append(option3);
		} else {
			dwrDAO.getSelect(area,streetCallback);
		}
	}
	function streetCallback(street) {
		$("#street").empty();
		if (street.length == 0 || $("#area").val == 0) {
			var option = $("<option>").text("请选择").val(0);
			$("#street").append(option);
			$("#val").val($("#area").val());
		} else {
			var option = $("<option>").text("请选择").val(0);
			$("#street").append(option);
			for ( var i = 0; i < street.length; i++) {
				var value = street[i]["addressId"];
				var name = street[i]["addressName"];
				option = $("<option>").text(name).val(value);
				$("#street").append(option);
			}
		}

	}
	function change3() {
		$("#val").val($("#street").val());
		var street = $("#street").val();
		if (street == 0) {
			$("#place").empty();
			var option = $("<option>").text("请选择").val(0);
			$("#place").append(option);
		} else {
			dwrDAO.getSelect(street,placeCallback);
		}
	}
	function placeCallback(place) {
		$("#place").empty();
		if (place.length == 0 || $("#street").val() == 0) {
			var option = $("<option>").text("请选择").val(0);
			$("#place").append(option);
			$("#val").val($("#street").val());
		} else {
			var option = $("<option>").text("请选择").val(0);
			$("#place").append(option);
			for ( var i = 0; i < place.length; i++) {
				var value = place[i]["addressId"];
				var name = place[i]["addressName"];
				option = $("<option>").text(name).val(value);
				$("#place").append(option);
			}
		}
	}
	function change4() {
		$("#val").val($("#place").val());
	}
</script>

地址：<s:select list="${map }" id="city" headKey="0" headerValue="请选择"></s:select> <%--通过struts2的标签传过来的第一级--%>
<select id="area" onchange="change2()">
	<option selected="selected" value="0">请选择</option>
</select>
<select id="street" onchange="change3()">	
	<option selected="selected" value="0">请选择</option>
</select>
<select id="place" onchange="change4()">
	<option selected="selected" value="0">请选择</option>
</select>
<s:hidden name="address.addressId" value="${address.addressId}" id="val"></s:hidden>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!