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

首先看一下数据库的设计:

2.存储过程的写法:

1
2
3
4
5
6
7
8
9
10
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

 看一下执行效果:

服务层的代码:

1
2
3
4
5
6
7
8
// 若要允许使用 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));
       }

 数据层的代码:

1
2
3
4
5
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));
}

 业务层:

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

 最核心的jquery调用WebService:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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);
                }
            })
        })
    });

 前端页面:

1
2
3
4
5
6
7
8
   <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><br>

 最后来张效果图:

当然里面用了一些公用类库,有需要的私聊!

posted @   石shi  阅读(377)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
点击右上角即可分享
微信分享提示