三、在JSP頁面對LIST物件級聯顯示
阿新 • • 發佈:2019-01-24
<%
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>