java ajax 实现省市区级联操作

-------controller--开始-------------

 /**

  * 地区获取级联数据

  * @param request

  * @param response

  * @param selLv

  * 1：获取省， 2：获取城市

  * @param cdVal

  * 选择的省市的 id

  * @return out json

  */

public String areaCheck(HttpServletRequest request,

   HttpServletResponse response,

   @RequestParam(value = "selLv", required = false) String selLv,

   @RequestParam(value = "cdVal", required = false) String cdVal) {

  try {

   response.setCharacterEncoding("UTF-8");

   PrintWriter out = response.getWriter();

   if (StringUtils.isNotBlank(selLv) && StringUtils.isNotBlank(cdVal)) {

    Gson gson = new Gson();

    String obj = "";

    if ("1".equals(selLv)) { // 1代表省

     List<DicMdmProvince> list = dicMdmProvinceService

       .findByAreaCd(Long.parseLong(cdVal), null, null);

     obj = gson.toJson(list);

    } else if ("2".equals(selLv)) { //2代表 城市

     List<DicMdmCity> list = dicMdmCityService.findByProvinceCd(

       Long.parseLong(cdVal), null, null);

     obj = gson.toJson(list);

    }

    out.print(obj);

    out.flush();

    out.close();

   }

  } catch (IOException e) {

   e.printStackTrace();

  }

  return "";

- ---- --controller--结束-------------

-------js 开始--------------

<script type="text/javascript">

 $(function(){
//首先根据省选择市

  $("#selArea").change(function(){

   var valStr = $('#selArea').val();

   $.ajax({

    type: "get",

    url: win$.url("areaCheck"),

    data: {'selLv': 1, 'cdVal': valStr},

    success: function(data){

     var msg = eval('(' + data + ')');

     $('#selProvince').empty().append('<option value="">请选择</option>');

     $.each(msg, function(i, val) {

      $('#selProvince').append('<option value="' + val.provinceCd + '">' + val.provinceName + '</option>');

     });

    }

   });

  });

//再根据市选择区

  $("#selProvince").change(function(){

   var valStr = $('#selProvince').val();

   $.ajax({

    type: "get",

    url: win$.url("areaCheck"),

    data: {'selLv': 2, 'cdVal': valStr},

    success: function(data){

     var msg = eval('(' + data + ')');

     $('#selCity').empty().append('<option value="">请选择</option>');

     $.each(msg, function(i, val) {

      $('#selCity').append('<option value="' + val.cityCd + '">' + val.cityName + '</option>');

     });

    }

   });

  });

 });

  </script>

-------js 结束--------------

- ------页面显示参考--开始------------------
  <tr> 
         <td colspan="8"> 
                           <span class="label"> &amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp 
                           &amp;nbsp&amp;nbsp地区：</span> 
                                    <!-- 区域--> 
                                     <select name="searchAreaName" id="selArea" class="select" style="width:105px"> 
                                     <option value="" selected="selected">请选择</option> 
                                         <c:forEach var="area" items="${dicMdmArea }" > 
                                         <c:choose> 
                      <c:when test="${area.areaCd eq param.searchAreaName}">  
                      <option value="${area.areaCd}" selected="selected">${area.areaName}</option> 
             </c:when> 
                      <c:otherwise> 
                      <option value="${area.areaCd}">${area.areaName}</option> 
                      </c:otherwise> 
                     </c:choose> 
                                         </c:forEach> 
                    </select>&amp;nbsp 
                     <!-- 省份--> 
                     <input type="hidden" id="Provinceid" value="${param.searchProvinceName}"/> 
                     <select name="searchProvinceName" id="selProvince" class="select" style="width:105px"> 
                              <option value="" selected="selected" >请选择</option>   
                     </select>&amp;nbsp 
                      
                      <!-- 城市--> 
                      <input type="hidden" id="Cityid" value="${param.searchCityName}"/> 
                     <select name="searchCityName" id="selCity" class="select" style="width:105px"> 
                             <option value="" selected="selected">请选择</option>   
                     </select> 
                        </td> 
        </tr>
- ------页面显示--开始------------------