ajax三级联动省市选择器

最新推荐文章于 2022-11-23 15:13:29 发布

张东_

最新推荐文章于 2022-11-23 15:13:29 发布

阅读量3.8k

点赞数 1

分类专栏： jquery c# 源码

本文链接：https://blog.csdn.net/zhangdong7514280095/article/details/8961186

版权

c# 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

源码

21 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

前台：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajax省市选择器.aspx.cs" Inherits="ajax.ajax省市选择器" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "WebService1.asmx/GetProvince",
                data: "{}",
                success: function (data) {
                    for (var i = 0; i < data.d.length; i++) {
                        var a = "<option value='" + data.d[i].provinceID + "'>" + data.d[i].provinceName + "</option>";
                        $("#Select1").append(a);
                    }
                }
            })
            $("#Select1").change(function () {
                $("#Select2 option").remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/GetCity",
                    data: "{father:'" + $("#Select1").val() + "'}",
                    success: function (data) {
                        for (var i = 0; i < data.d.length; i++) {
                            var a = "<option value='" + data.d[i].cityID + "'>" + data.d[i].cityname + "</option>";
                            $("#Select2").append(a);
                        }
                    }
                })
            })
            $("#Select2").change(function () {
                $("#Select3 option").remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/Getarea",
                    data: "{father:'" + $("#Select2").val() + "'}",
                    success: function (data) {
                        for (var i = 0; i < data.d.length; i++) {
                            var a = "<option value='" + data.d[i].father + "'>" + data.d[i].areaname + "</option>";
                            $("#Select3").append(a);
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="Select1">

        </select>
        <select id="Select2">
            <option>---请选择---</option>
        </select>
        <select id="Select3">
            <option>---请选择---</option>
        </select>
    </div>
    </form>
</body>
</html>
asmx：

[WebMethod]
        public List<Model.province> GetProvince()
        {
            BLL.province p = new BLL.province();
            return p.GetModelList("");
        }
        [WebMethod]
        public List<Model.city> GetCity(string father)
        {
            BLL.city c = new BLL.city();
           return c.GetModelList(" father=" + father);
        }
        [WebMethod]
        public List<Model.area> Getarea(string father)
        {
            BLL.area a = new BLL.area();
            return a.GetModelList(" father="+father);
        }

张东_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax三级联动省市选择器

前台：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> $(function () { $.ajax({ type: "post",
复制链接

扫一扫

专栏目录