使用三层实现省市县三级联动（利用ajax实现无刷新效果）

最新推荐文章于 2021-03-11 10:51:22 发布

刘晓飞

最新推荐文章于 2021-03-11 10:51:22 发布

阅读量1.1k

点赞数

分类专栏： Ajax自我学习

本文链接：https://blog.csdn.net/lxfzgg/article/details/8961138

版权

Ajax自我学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

首页：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Webjax.aspx.cs" Inherits="sanjiliandong.Webjax" %>

<!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="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "WebService1.asmx/GetListPro",
                data: "{}",
                success: function (result) {
                    var stroption = '';
                    for (var i = 0; i < result.d.length; i++) {
                        stroption += '<option value=' + result.d[i].provinceID + '>';
                        stroption += result.d[i].provincename;
                        stroption += '</option>';
                    }
                    $('#SePro').append(stroption);
                }
            })
            $("#SePro").change(function () {
                $("#SeCity option:gt(0)").remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/GetListCity",
                    data: "{proid:'" + $('#SePro').val() + "'}",
                    success: function (result) {
                        var stroption = '';
                        for (var i = 0; i < result.d.length; i++) {
                            stroption += '<option value=' + result.d[i].cityID + '>';
                            stroption += result.d[i].cityname;
                            stroption += '</option>';
                        }
                        $('#SeCity').append(stroption);
                    }
                })

})

            $("#SeCity").change(function () {
                $("#SeArea option:gt(0)").remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/GetListArea",
                    data: "{areaid:'" + $('#SeCity').val() + "'}",
                    success: function (result) {
                        var stroption = '';
                        for (var i = 0; i < result.d.length; i++) {
                            stroption += '<option value=' + result.d[i].areaID + '>';
                            stroption += result.d[i].areaname;
                            stroption += '</option>';
                        }
                        $('#SeArea').append(stroption);
                    }
                })
            })

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="SePro">
            <option>--请选择--</option>
        </select>
        <select id="SeCity">
            <option>--请选择--</option>
        </select>
        <select id="SeArea">
            <option>--请选择--</option>
        </select>

    </div>
    </form>
</body>
</html>
WebService1.asmx后台

public List<Model.province> GetListPro()
        {
            BLL.province pro = new BLL.province();
            List<Model.province> listpro= pro.GetListModel();
            return listpro;
        }
        [WebMethod]
        public List<Model.city> GetListCity(string proid)
        {
            BLL.city city = new BLL.city();
            List<Model.city> listcity = city.GetListModel("father='" + proid + "'");
            return listcity;
        }
        [WebMethod]
        public List<Model.area> GetListArea(string areaid)
        {
            BLL.area area = new BLL.area();
            List<Model.area> listcity = area.GetListModel("father='" + areaid + "'");
            return listcity;
        }

DAL中：

province.cs

public System.Collections.Generic.List<Model.province> GetListModel()
        {
            System.Collections.Generic.List<Model.province> list = new System.Collections.Generic.List<Model.province>();
            DataTable dt = GetList("").Tables[0];
            foreach (DataRow row in dt.Rows)
            {
                Model.province mpro = new Model.province();
                mpro.id = Convert.ToInt32(row["id"]);
                mpro.provinceID = row["provinceID"].ToString();
                mpro.provincename = row["provincename"].ToString();
                list.Add(mpro);
            }
            return list;

        }

public System.Collections.Generic.List<Model.city> GetListModel(string proid)
        {
            List<Model.city> list = new List<Model.city>();
            DataTable dt = GetList(proid).Tables[0];
            foreach(DataRow row in dt.Rows)
            {
                Model.city city = new Model.city();
                city.id = Convert.ToInt32(row["id"]);
                city.cityID = row["cityID"].ToString();
                city.cityname = row["cityname"].ToString();
                list.Add(city);
            }
            return list;
        }

public System.Collections.Generic.List<Model.area> GetListModel(string areaid)
        {
            DataTable dt = GetList(areaid).Tables[0];
            List<Model.area> list = new List<Model.area>();
            foreach(DataRow row in dt.Rows)
            {
               Model.area area = new Model.area();
               area.id= Convert.ToInt32(row["id"]);
               area.areaID = row["areaID"].ToString();
               area.areaname = row["areaname"].ToString();
               list.Add(area);
            }
            return list;
        }