存儲過程+Jquery+WebService實作三級關聯：

首先看一下資料庫的設計：

2.存儲過程的寫法：

ALTER proc [dbo].[pro_GetCity](
@city_pid int
)
as
begin
--SELECT * FROM tbl_city WHERE city_pid IN (
select * from tbl_city where city_pid=@city_pid
end

--exec [dbo].[pro_GetCity] 0      

 看一下執行效果：

服務層的代碼：

// 若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消注釋以下行。 
     [System.Web.Script.Services.ScriptService] 

      [WebMethod]
        public string CityList(string citycode)
        {
            return JsonHelper.GetJson<List<tbl_city>>(new SelectComboxBLL().CityList(citycode));
        }      

 資料層的代碼：

public List<tbl_city> CityList(string citycode)
        {
            SqlParameter[] pars = { new SqlParameter("@city_pid", citycode) };
            return new SQLBase().TableToEntity<tbl_city>(DBhelp.SqlHelper.GetTable("pro_GetCity", System.Data.CommandType.StoredProcedure, pars));
        }      

 業務層：

public List<tbl_city> CityList(string citycode)
        {
            return new SelectCombox().CityList(citycode);
        }      

 最核心的jquery調用WebService：

<script type="text/javascript">
         
          $(function () {
              //省市縣的綁定
              $.ajax({
                  type: "post",
                  contentType: "application/json",
                  url: "/WebService/SelectComboxService.asmx/CityList",
                  data: "{citycode:'0'}",
                  success: function (result) {
                      var arr = null;
                      if (typeof result.d == 'string')
                          arr = JSON.parse(result.d);
                      else
                          arr = result.d;
                      var stroption = '';
                      for (var i = 0; i < arr.length; i++) {
                          stroption += '<option value=' + arr[i]._city_id + '>';
                          stroption += arr[i]._name;
                          stroption += '</option>';
                      }
                      $('#seprovince').append(stroption);
                  }
              })


              $('#seprovince').change(function () {
                  $('#secity option:gt(0)').remove();
                  $('#searea option:gt(0)').remove();


                  $.ajax({
                      type: "post",
                      contentType: "application/json",
                      url: "/WebService/SelectComboxService.asmx/CityList",
                      data: "{citycode:'" + $(this).val() + "'}",
                      success: function (result) {

                          var arr = null;
                          if (typeof result.d == 'string')
                              arr = JSON.parse(result.d);
                          else
                              arr = result.d;
                          var strocity = '';
                          for (var i = 0; i < arr.length; i++) {
                              strocity += '<option value=' + arr[i]._city_id + '>';
                              strocity += arr[i]._name;
                              strocity += '</option>';
                          }
                          $('#secity').append(strocity);
                      }
                  })
              })


              $('#secity').change(function () {
                  $('#searea option:gt(0)').remove();
                  $.ajax({
                      type: "post",
                      contentType: "application/json",
                      url: "/WebService/SelectComboxService.asmx/CityList",
                      data: "{citycode:'" + $(this).val() + "'}",
                      success: function (result) {
                          var arr = null;
                          if (typeof result.d == 'string')
                              arr = JSON.parse(result.d);
                          else
                              arr = result.d;
                          var stroarea = '';
                          for (var i = 0; i < arr.length; i++) {
                              stroarea += '<option value=' + arr[i]._city_id + '>';
                              stroarea += arr[i]._name;
                              stroarea += '</option>';
                          }
                          $('#searea').append(stroarea);
                      }
                  })
              })
          }）；      

 前端頁面：

<tr>
                                        <td>**  詳細位址：</td>
                                        <td style="width:60%">
                                            <select id="seprovince"><option>--請選擇--</option></select>省
                                              <select id="secity"><option>--請選擇--</option></select>市
                                              <select id="searea"><option>--請選擇--</option></select>區（縣）
</td>
</tr>      

 最後來張效果圖：