存储过程+Jquery+WebService实现三级联动：

最新推荐文章于 2025-09-03 14:00:53 发布

转载最新推荐文章于 2025-09-03 14:00:53 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sunliyuan/p/5740871.html

文章标签：

#json #前端 #数据库 #ViewUI

本文介绍了一种基于ASP.NET AJAX的省市县三级联动选择框实现方案。通过存储过程获取数据库中的城市信息，并利用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>

最后来张效果图：