$.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

 





大小: 6.2 KB

查看图片附件