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>

在於web.xml同級放入dwr.xml

<?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>

編寫java類，包含jsp頁面中調用的方法，這裏傳的是一個JSON值，地點內容都存在數據庫Address表裏，這裏直接調用DAO方法取出List，DAO略過

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>