1. 程式人生 > >三、在JSP頁面對LIST物件級聯顯示

三、在JSP頁面對LIST物件級聯顯示

<%
String path = request.getContextPath();
request.setAttribute("path", path);
String provinceJSONString = CommonService.getAllProvinceJSONString();
%>
<script type="text/javascript">
	var provinceJSON = JSON.parse('<%=provinceJSONString%>'); //轉換為json物件 
	var ohtml = "<option value='0'>請選擇</option>";
	function loadProvinces() {
		if (provinceJSON) {
			var provinceHtml = ohtml;
			for (var key in provinceJSON) {
				provinceHtml += "<option value='" + key + "'>" + provinceJSON[key]["name"] + "</option>";
			}
			$("#provinceList").html(provinceHtml);
		}
	};	
	
	function loadCities() {
		var provinceId = $("#provinceList").val();
		var cityHtml = ohtml;
		if (provinceId > 0) {
			var citiesJSON = provinceJSON[provinceId]["cities"];
			for (var key in citiesJSON) {
				cityHtml += "<option value='" + key + "'>" + citiesJSON[key]["name"] + "</option>";
			}
		}
		$("#cityList").html(cityHtml);
		$("#areaList").html(ohtml);
	};
	
	function loadAreas() {
		var provinceId = $("#provinceList").val();
		var cityId = $("#cityList").val();
		var areaHtml = ohtml;
		if (cityId > 0) {
			var areasJSON = provinceJSON[provinceId]["cities"][cityId]["areas"];
			for (var key in areasJSON) {
				areaHtml += "<option value='" + key + "'>" + areasJSON[key]["name"] + "</option>";
			}
		}
		$("#areaList").html(areaHtml);
	};

	//省市區級聯JS
	$(function() {
		loadProvinces();
		
		$("#provinceList").change(function() {
			loadCities();
		});
		
		$("#cityList").change(function() {
			loadAreas();
		});

		<s:if test="defualtDeliveryaddress != null">
			$("#provinceList").val(<s:property value="defualtDeliveryaddress.area.city.province.id"/>);
			loadCities();
			$("#cityList").val(<s:property value="defualtDeliveryaddress.area.city.id"/>);
			loadAreas();
			$("#areaList").val(<s:property value="defualtDeliveryaddress.area.id"/>);
		</s:if>
	});
</script>