$.ajax中dataType为html实现地区显示效果

实现了选择第一个时，第二个才显示，并且显示的是对应的信息

 

主要实现：

1.进入页面时第二个 select隐藏，第一个被清空，通过传回的List将第一个 select的option补全
2.通过ajax将第一个select中选中的值对应的信息传入，dataType类型为html，将返回的result添加到第二个 select中

    <tr>
	<td><label class="text">所属区域编号：</label></td>
	<td valign="middle">
		<select  id="address_city_id"></select>
		 	 <input type="hidden" name="areaStore.city" id="address_city" /> 
		<select  id="address_region_id"></select>
			 <input type="hidden" name="areaStore.region" id="address_region" /></td>
    </tr>

 

<script>
function initCity(){
	
	$("#address_region_id").hide();
	$("#address_city_id").empty();
	$("<option value='-1'>请选择...</option>").appendTo($("#address_city_id"));
	
	<c:forEach items="${cityList}" var="city" >
		$("<option value='${(city.produce_area_id)}' >${city.produce_area_name}</option>").appendTo($("#address_city_id"));
	</c:forEach>
	
	$("#address_city_id").change(function(){
		$("#address_city").val($("#address_city_id option:selected").text());

		$.ajax({
			method:"get",
			url:"areaStore!list_region.do?city_id=" + $("#address_city_id").attr("value"),
			dataType:"html",
			success:function(result){
				alert(result);
 				$("#address_region_id").show();
				$(result).appendTo($("#address_region_id"));
			},
			error:function(){
				alert("异步失败");
			}
		});
	});
	$("#address_region_id").change(function(){
		$("#address_region").val($("#address_region_id option:selected").text());
	});
}
$(function(){
	initCity();
});
</script>

alert(result)得到的为：

<option value="-1">请选择...</option>

<option value="2">上城区</option>

<option value="3">下城区</option>

<option value="4">江干区</option>

<option value="5">拱墅区</option>

<option value="6">西湖区</option>

<option value="7">滨江区</option>

<option value="8">萧山区</option>

 

第二个请求：

	public String list_region() {
		regionList = areaStoreManager.listRegion(city_id);
		return "list_region";
	}

 

<action name="areaStore" class="areaStoreAction">
	<result name="list_region">/Region_Area_Panel.html</result>	 	
 </action>

 Region_Area_Panel.html页面(第二个select中内容)：

<option value="-1">请选择...</option>
<#list regionList as region>
<option value="${(region.produce_area_id)}">${region.produce_area_name}</option>
</#list>

 1