3. Cascading display of LIST objects on the JSP page

        in the project

        There is a need to cascade the List object passed from the background in jsp, and write several implementation methods.

Now save the implementation steps as follows for future use.

=================================================

         // Province list There are cities in the province and there are areas in the city

        省 （id，name，cities） 市 （id，name，areas） 区（id，name） 

========

1. Asynchronous acquisition:

=========================

JSP：

<div class="item">
	<span><em>*</em>Location:</span>
		<span class="error-msg" id="areaNote"></span>
		<div class="fl">
			<input type="hidden" id="provinceSet" value="${provinceList }">
			<select id="provinceList" onchange="loadCity(this)" class="sele">
			<option>Please select</option>
			<c:forEach var="province" items="${provinceList }">
				<option value=${province.id }>${province.name }</option>
			</c:forEach>
			</select>
			<select id="cityList" onchange="loadArea()" class="sele"><option value="">请选择</option></select>
			<select id="areaList" name="deliveryaddress.area.id" class="sele"><option value="">请选择</option></select>
		</div>
</div>

  js:

<script type="text/javascript">
/**
 * Get secondary list
 */
function loadCity()
	{
		var provinceId = $("#provinceList").find("option:selected").val();
		jQuery.ajax( {
		type : "post",
		dataType : "json",
		url : "delivery_loadCity.action",
		data : "provinceId="+provinceId,
		cache : false,
		success : function(dataResult)
			{
			// no login skip login
			 if (isUserNotLogin (dataResult)) {
				goToLogin ();
				return;
			}
			var cityHtml = "<option value='0'>Please select</option>";
			if(dataResult)
			{
				$.each(dataResult, function()
					{
						cityHtml += "<option value='" + this.id + "'>" + this.name + "</option>" ;
					}
				);
			}
			$("#cityList").html(cityHtml);
			$("#areaList").html("<option value='0'>请选择</option>");
			},
			error : function(XMLHttpResponse)
			{
				return false;
			}
		});
	}


	/**
	 * Get the third-level list
	 */
	function loadArea()
	{
		var cityId = $("#cityList").find("option:selected").val();
		jQuery.ajax( {
		type : "post",
		dataType : "json",
		url : "delivery_loadArea.action",
		data : "cityId="+cityId,
		cache : false,
		success : function(dataResult)
		{
			// no login skip login
			 if (isUserNotLogin (dataResult)) {
				goToLogin ();
				return;
			}
			var areaHtml = "<option value='0'>请选择</option>";
			if(dataResult)
			{
				$.each(dataResult, function()
					{
						areaHtml += "<option value='" + this.id + "'>" + this.name + "</option>" ;
					}
				);
			}
			$("#areaList").html(areaHtml);
			},
			error : function(XMLHttpResponse)
			{
				return false;
		}
	});
}
</script>

  action:

public String loadCity() throws Exception
	{
		HttpServletRequest request = ServletActionContext.getRequest();
		String provinceId = request.getParameter("provinceId");
		Province province = provinceService.getById(Integer.valueOf(provinceId));
		Set<City> citySet = province.getCities();
		/ / Convert the citySet collection to Json and pass it to the page
		//Only get the id and name properties of the City
		SimplePropertyPreFilter filter = new SimplePropertyPreFilter();
		Set<String> set = filter.getIncludes();
		set.add("id");
		set.add("name");
		writeHtml(JSONArray.toJSONString(citySet,filter));
		return null;
	}
	
	public String loadArea() throws Exception
	{
		HttpServletRequest request = ServletActionContext.getRequest();
		String cityId = request.getParameter("cityId");
		City city = cityService.getById(Integer.valueOf(cityId));
		Set<Area> areaSet = city.getAreas();
		//Pass the areaSet collection to the page
		//Only select the name, id and code properties of the Area
		SimplePropertyPreFilter filter = new SimplePropertyPreFilter();
		Set<String> set = filter.getIncludes();
		set.add("id");
		set.add("name");
		writeHtml(JSONArray.toJSONString(areaSet,filter));
		return null;
	}
	
	//Return strData result to page
	protected void writeHtml(String strData) throws Exception
	{
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("application/json;charset=UTF-8");  
		response.setHeader("Cache-Control", "no-cache");  
		PrintWriter out = response.getWriter();  
		out.write(strData);
		out.flush();    
		out.close();
	}

 

========

2. Traverse the property provinceList of Action to obtain:

=========================

 jsp: save traversal list in hidden field

<div class="fl">
	<select id="provinceList" class="sele">
		<option>Please select</option>
		<s:iterator value="provinceList" var="province">  
			<option value="<s:property value='id'/>"><s:property value="name"/></option>  
		</s:iterator>  
	</select>
	<select id="cityList" onchange="loadArea()" class="sele"><option value="">请选择</option></select>
	<select id="areaList" name="deliveryaddress.area.id" class="sele"><option value="">请选择</option></select>
</div>
<s:iterator value="provinceList" var="province">
	<s:iterator value="cities" var="city">
		<input type="hidden" name ="province_<s:property value='#province.id'/>" value="<s:property value='#city.name'/>_<s:property value='#city.id'/>"/>
		<s:iterator value="#city.areas" var="area">  
			<input type="hidden" name ="city_<s:property value='#city.id'/>" value="<s:property value='#area.name'/>_<s:property value='#area.id'/>"/>
		</s:iterator>
	</s:iterator>
</s:iterator>

 js:

$(function(){
	$("#provinceList").change(function (){
		var value = $(this).val();  
        $("#cityList").html("<option value='0'>请选择</option>");  
        $("input[name^='province_"+value+"']").each(function(){  
            var val = $ (this) .val ();  
            $("#cityList").append("<option value='"+val.split("_")[1]+"'>"+val.split("_")[0]+"</option>");  
        });
        $("#areaList").html("<option value='0'>请选择</option>");
	});
	$("#cityList").change(function (){
		var value = $(this).val();  
		$("#areaList").html("<option value='0'>请选择</option>");   
        $("input[name^='city_"+value+"']").each(function(){  
            var val = $ (this) .val ();  
            $("#areaList").append("<option value='"+val.split("_")[1]+"'>"+val.split("_")[0]+"</option>");  
        });
	});
});

   

========

3. In Action, convert the provinceList into a JSON string and pass it to the page to save:

=========================

========

3. In Action, convert the provinceList into a JSON string and pass it to the page to save:

=========================

 jsp：

<div>
	<select id="provinceList" class="sele"><option>请选择</option></select>
	<select id="cityList" class="sele"><option value="">请选择</option></select>
	<select id="areaList" name="deliveryaddress.area.id" class="sele"><option value="">请选择</option></select>
</div>
<%-- Save the JSON string sent from the background directly in js
    The page does not need to be saved
    <s:hidden id="provinceJSONString" value="%{provinceJSONString}"></s:hidden> --%>

 js: save the string from the background to the js object

$(function(){
	var provinceJSONString = $("#provinceJSONString").val();//Convert java String object into js character object
	var provinceJSON = eval('('+provinceJSONString+')');//Convert to json object
	/**
	 * Load the page for the first time, populate the province list
	 * Load the first-level list
	 */
	loadOptions(provinceJSON,$("#provinceList"));
	
	function loadOptions(data,item){
		$.each(data, function(index,value){
				item.append($("<option />").val(index).text(value.name));
			});
	}
	/**
	 * Load secondary list
	 */
	$("#provinceList").change(function (){
		var value = $(this).val();  
        $("#cityList").html("<option value='0'>请选择</option>");  
        loadOptions(provinceJSON[value].cities,$("#cityList"));
        $("#areaList").html("<option value='0'>请选择</option>");
	});

  action: convert provinceList to a string in JSON format

/**
 * convert provinceList to JSON string
 * @param _provinceList
 * @return
 * @throws Exception
 */
public static String toProvinceJSONString(List<Province> _provinceList) throws Exception
{
	if (_provinceList == null)
		return null;
	Iterator<Province>	itrProvince = _provinceList.iterator();
	StringBuffer strBuffer = new StringBuffer("[");
	while(itrProvince.hasNext())
	{
		Province _province = itrProvince.next();
		strBuffer.append("{\"id\":\""+_province.getId()+"\",\"name\":\""+_province.getName()+"\",\"cities\":[");
		Set<City> Cities = _province.getCities();
		Iterator<City>	itrCity = Cities.iterator();
		while(itrCity.hasNext())
		{
			City _city = itrCity.next();
			strBuffer.append("{\"id\":"+_city.getId()+",\"name\":\""+_city.getName()+"\",\"areas\":[");
			Set<Area> Areas = _city.getAreas();
			Iterator<Area>	itrArea	= Areas.iterator();
			while(itrArea.hasNext())
			{
				Area _area = itrArea.next();
				strBuffer.append("{\"id\":\""+_area.getId()+"\",\"name\":\""+_area.getName()+"\"}");
				if (itrArea.hasNext())
				{
					strBuffer.append(",");
				}
			}
			strBuffer.append("]}");
			if (itrCity.hasNext())
			{
				strBuffer.append(",");
			}
		}
		strBuffer.append("]}");
		if (itrProvince.hasNext())
		{
			strBuffer.append(",");
		}
	}
	strBuffer.append("]");
	
	return strBuffer.toString();
}