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