Ajax 实现省市县三级联动【无刷新】三层 | 三级联动—有刷新

发布时间：2020-12-15 22:06:03 所属栏目：百科来源：网络整理

导读：SQL建表 HTML——HTMLPage1.htm html xmlns="http://www.w3.org/1999/xhtml"head titleAjax 实现省市县三级联动【无刷新】三层/title style type="text/css" select { width: 130px; } /style script src="js/Jquery1.7.js" type="text/javascript"/script

SQL建表

HTML——HTMLPage1.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax 实现省市县 三级联动【无刷新】三层</title>
    <style type="text/css">
        select
        {
            width: 130px;
        }
    </style>
    <script src="js/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 (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>';
                    }
                    $('#seprovince').append(stroption);
                }
            })

            $('#seprovince').change(function () {

                $('#secity option:gt(0)').remove();
                $('#searea option:gt(0)').remove();

                $.ajax({
                    type: "post",url: "WebService1.asmx/GetCItyByPro",data: "{proid:'" + $(this).val() + "'}",success: function (result) {
                        var strocity = '';
                        for (var i = 0; i < result.d.length; i++) {
                            strocity += '<option value=' + result.d[i].cityID + '>';
                            strocity += result.d[i].cityname;
                            strocity += '</option>';
                        }
                        $('#secity').append(strocity);
                    }
                })
            })

            $('#secity').change(function () {
                $('#searea option:gt(0)').remove();
                $.ajax({
                    type: "post",url: "WebService1.asmx/GetAreaByCity",data: "{cityid:'" + $(this).val() + "'}",success: function (result) {
                        var stroarea = '';
                        for (var i = 0; i < result.d.length; i++) {
                            stroarea += '<option value=' + result.d[i].areaID + '>';
                            stroarea += result.d[i].areaname;
                            stroarea += '</option>';
                        }
                        $('#searea').append(stroarea);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>
                用户名
            </td>
            <td>
                <input id="Text1" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                密码
            </td>
            <td>
                <input id="Text2" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                确认密码
            </td>
            <td>
                <input id="Text3" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                邮箱
            </td>
            <td>
                <input id="Text4" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                地址
            </td>
            <td>
                <select id="seprovince">
                    <option>--请选择--</option>
                </select>
                省
                <select id="secity">
                    <option>--请选择--</option>
                </select>市
                <select id="searea">
                    <option>--请选择--</option>
                </select>县
            </td>
        </tr>
    </table>
</body>
</html>

创建Web服务——WebService1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;

namespace WebApplication1
{
    /// <summary>
    /// WebService1 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
     [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
        [WebMethod]
        public List<Model.province> GetProvince()
        {
            BLL.province bpro = new BLL.province();
            List<Model.province> list= bpro.GetListModel();
            return list;
        }
        [WebMethod]
        public List<Model.city> GetCItyByPro(string proid)
        {
            BLL.city bcity = new BLL.city();
            List<Model.city> list = bcity.GetListModel("father='"+proid+"'");
            return list;
        }
        [WebMethod]
        public List<Model.area> GetAreaByCity(string cityid)
        {
            BLL.area barea = new BLL.area();
            List<Model.area> list= barea.GetListModel("father='"+cityid+"'");
            return list;
        }
    }
}

====三层 ——> 创建类库 BLL 、DAL、DataAccess、MODEL——> 在类库里添加类

province表——动软生成类

GetListModel在BLL层定义

GetListModel转到定义——DAL层

city表——动软生成类

city在BLL层定义

public List<Model.city> GetListModel(string strsql)
        {
            return dal.GetListModel(strsql);
        }

city转到定义——DAL层

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

area表——动软生成类

area在BLL层定义

public List<Model.area> GetListModel(string strsql)
        {
            return dal.GetListModel(strsql);
        }

area转到定义——DAL层

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

=========================================================三级联动—有刷新【两种实现方法】

第一种：

SQL建表

三层 ——> 创建类库 BLL 、DAL、DataAccess、MODEL——> 在类库里添加类

Web窗体——WebForm1.aspx

前台：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>三级联动—有刷新</title>
    <style type="text/css">
        select
        {
            width: 130px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr><td>地址</td><td>
            <asp:DropDownList ID="ddlprovince" runat="server" AutoPostBack="True" 
                onselectedindexchanged="ddlprovince_SelectedIndexChanged">
            </asp:DropDownList>省
            <asp:DropDownList ID="ddlcity" runat="server" AutoPostBack="True" 
                onselectedindexchanged="ddlcity_SelectedIndexChanged">
            </asp:DropDownList>市
            <asp:DropDownList ID="ddlarear" runat="server">
            </asp:DropDownList>县
        </td></tr></table>
    </div>
    </form>
</body>
</html>

后台：——引用了动软生成的类库

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender,EventArgs e)
        {
            if (!IsPostBack)
            {
                LoadProvince();
                Model.province p = new Model.province();
                p.id = 1;
                p.provinceID = "222221";
                p.provincename = "北京";

                Model.province p1 = new Model.province();
                p1.id = 2;
                p1.provinceID = "222222";
                p1.provincename = "天津";
            }
        }

        private void LoadProvince()
        {
            BLL.province bpro = new BLL.province();
            DataTable dt= bpro.GetList("").Tables[0];

            
            ddlprovince.DataSource = dt;
            ddlprovince.DataTextField = "provincename";
            ddlprovince.DataValueField = "provinceID";
            ddlprovince.DataBind();

        }

        protected void ddlprovince_SelectedIndexChanged(object sender,EventArgs e)
        {
            if (this.ddlarear.Items.Count>0)
            {
                this.ddlarear.Items.Clear();
            }
            BLL.city bcity = new BLL.city();
            string proid = this.ddlprovince.SelectedItem.Value;
            
            DataTable dt = bcity.GetList("father='"+proid+"'").Tables[0];

            ddlcity.DataSource = dt;
            ddlcity.DataTextField = "cityname";
            ddlcity.DataValueField = "cityID";
            ddlcity.DataBind();

            //绑定默认显示的市级区划下面所有的县
            string cityid= dt.Rows[0]["cityID"].ToString();
            BLL.area baraer = new BLL.area();
            
            DataTable dtarea = baraer.GetList("father='" + cityid + "'").Tables[0];

            ddlarear.DataSource = dtarea;
            ddlarear.DataTextField = "areaname";
            ddlarear.DataValueField = "areaID";
            ddlarear.DataBind();

        }

        protected void ddlcity_SelectedIndexChanged(object sender,EventArgs e)
        {
            BLL.area baraer = new BLL.area();
            string cityid = this.ddlcity.SelectedItem.Value;

            DataTable dt = baraer.GetList("father='" + cityid + "'").Tables[0];

            ddlarear.DataSource = dt;
            ddlarear.DataTextField = "areaname";
            ddlarear.DataValueField = "areaID";
            ddlarear.DataBind();
        }
    }
}

SQL建表

三层 ——> 创建类库 BLL 、DAL、DataAccess、MODEL——> 在类库里添加类

Web窗体——WebForm2.aspx

前台：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        select
        {
            width: 130px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <table>
        <tr><td>地址</td><td>
            <asp:DropDownList ID="ddlprovince" runat="server" AutoPostBack="True" 
                onselectedindexchanged="ddlprovince_SelectedIndexChanged">
            </asp:DropDownList>省
            <asp:DropDownList ID="ddlcity" runat="server" AutoPostBack="True" 
                onselectedindexchanged="ddlcity_SelectedIndexChanged">
            </asp:DropDownList>市
            <asp:DropDownList ID="ddlarear" runat="server" 
                >
            </asp:DropDownList>县
        </td></tr></table>
    </div>
    </form>
</body>
</html>

后台：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender,EventArgs e)
        {
            if (!IsPostBack)
            {
                LoadProvince();
            }
        }

        private void LoadProvince()
        {
            BLL.province bprovince = new BLL.province();
            List<Model.province> list= bprovince.GetListModel();

            this.ddlprovince.DataSource = list;
            this.ddlprovince.DataTextField = "provincename";
            this.ddlprovince.DataValueField = "provinceID";
            this.ddlprovince.DataBind();
 
        }

        protected void ddlprovince_SelectedIndexChanged(object sender,EventArgs e)
        {
            string id = this.ddlprovince.SelectedItem.Value;
           BLL.city bcity = new BLL.city();
            List<Model.city> list = bcity.GetListModel("father="
                +id);

            this.ddlcity.DataSource = list;
            this.ddlcity.DataTextField = "cityname";
            this.ddlcity.DataValueField = "cityID";
            this.ddlcity.DataBind();
        }

        protected void ddlcity_SelectedIndexChanged(object sender,EventArgs e)
        {
            string id = this.ddlcity.SelectedItem.Value;
            BLL.area barear = new BLL.area();
            List<Model.area> list = barear.GetListModel("father="
                +id);

            this.ddlarear.DataSource = list;
            this.ddlarear.DataTextField = "areaname";
            this.ddlarear.DataValueField = "areaID";
            this.ddlarear.DataBind();
            

        }
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新

Ajax 实现省市县三级联动【无刷新】三层 | 三级联动—有刷新