无刷新三级联动

   <script type="text/javascript">         $(function () {             $.ajax({                 type: "post",                 contentType: "application/json",                 url: "WebService1.asmx/GetListProvince",                 Data: "{}",                 success: function (result) {                     var strDrop = '';                     for (var i = 0; i < result.d.length; i++) {                         strDrop += "<option value='" + result.d[i].provinceID + "' >" + result.d[i].provinceName + "</option>";                     }                     $('#Province').append(strDrop);                 }             })
            $('#Province').change(function () {                 $('#City option:gt(0)').remove();                 $('#Area option:gt(0)').remove();                 $.ajax({                     type: "post",                     contentType: "application/json",                     url: "WebService1.asmx/GetListCity",                     data: "{Id:'" + $(this).val() + "'}",                     success: function (result) {                         var strCity = '';                         for (var i = 0; i < result.d.length; i++) {                             strCity += "<option value='" + result.d[i].cityID + "' >" + result.d[i].cityName + "</option>";                         }                         $('#City').append(strCity);                     }                 })             })
            $('#City').change(function () {                 $('#Area option:gt(0)').remove();                 $.ajax({                     type: "post",                     contentType: "application/json",                     url: "WebService1.asmx/GetListArea",                     data: "{Id:'" + $(this).val() + "'}",                     success: function (result) {                         var strArea = '';                         for (var i = 0; i < result.d.length; i++) {                             strArea += "<option value='" + result.d[i].areaID + "' >" + result.d[i].areaName + "</option>";                         }                         $('#Area').append(strArea);                     }                 })             })
        })     </script>

 

 

<select id="Province">

       <option>--请选择--</option>
    </select>省
    <select id="City">
       <option>--请选择--</option>
    </select>市
    <select id="Area">
      <option>--请选择--</option>

    </select>县

 

WebService

 

      [WebMethod]         public List<Model.province> GetListProvince()         {             BLL.province bll_Province = new BLL.province();             List<Model.province> list = bll_Province.GetListModel();             return list;         }
        [WebMethod]         public List<Model.city> GetListCity(string Id)          {             BLL.city bll_City = new BLL.city();             List<Model.city> list = bll_City.GetListCity("father='"+Id+"'");             return list;         }
        [WebMethod]         public List<Model.area> GetListArea(string Id)         {             BLL.area bll_area = new BLL.area();             List<Model.area> list = bll_area.GetlistArea("father='" + Id + "'");             return list;         }

三层的方法同上一篇文章的三层相同

原文地址:https://www.cnblogs.com/qiqiBoKe/p/3103131.html