GVKun编程网logo

loner_li AJax 无刷新 省市县三级联动（最终版）（webservice+三层）Html版和 有刷新的 web版 （2）

24

最近很多小伙伴都在问loner_liAJax无刷新省市县三级联动和最终版这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展ajax实现无刷新实现省市县(区)三级联动、Ajax实现省市

最近很多小伙伴都在问loner_li AJax 无刷新 省市县三级联动和最终版这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展ajax 实现无刷新实现省市县(区)三级联动、Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新、ajax.net +jquery 无刷新三级联动的实例代码、ajax不刷新的情况下省市县三级联动等相关知识，下面开始了哦！

本文目录一览：

loner_li AJax 无刷新 省市县三级联动（最终版）（webservice+三层）Html版和 有刷新的 web版 （2）

loner_li AJax 无刷新 省市县三级联动（最终版）（webservice+三层）Html版和 有刷新的 web版 （2）

html前台

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
select
{
width: 150px;
}
</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 strpro;
for (var i = 0; i < result.d.length; i++) {
strpro += '<option value=' + result.d[i].provinceID + '>';
strpro += result.d[i].provincename + '</option>';
}
$('#sepro').append(strpro);
}
});
//以上为绑定省
//开始绑定市

$('#sepro').change(function () {
$('#secity option:gt(0)').remove();
$.ajax({
type: "post",
url: "WebService1.asmx/GetCity",
data: "{proid:'" + $(this).val() + "'}",
success: function (result) {
var strcity;
for (var i = 0; i < result.d.length; i++) {
strcity += '<option value=' + result.d[i].cityID + '>';
strcity += result.d[i].cityname + '</option>';
}
$('#secity').append(strcity);
}
});
});
//以上为绑定市
//开始绑县

$('#secity').change(function () {
$('#searea option:gt(0)').remove();
$.ajax({
type: "post",
url: "WebService1.asmx/GetArea",
data: "{cityid:'" + $(this).val() + "'}",
success: function (result) {
var strarea;
for (var i = 0; i < result.d.length; i++) {
strarea += '<option value=' + result.d[i].areaID + '>';
strarea += result.d[i].areaname + '</option>';
}
$('#searea').append(strarea);
}
});

})
})
</script>
</head>
<body>
<select id="sepro">
<option>------请选择----</option>
</select>省
<select id="secity">
<option>------请选择----</option>
</select>市
<select id="searea">
<option>------请选择----</option>
</select>县
</body>
</html>

WebService1.asmx

///////////////省 市 县
[WebMethod]
public List<AJaxStudy.Model.province> GetProvince()
{
AJaxStudy.BLL.province bpro = new AJaxStudy.BLL.province();
List<AJaxStudy.Model.province> list = bpro.GetListModel();
return list;
}

[WebMethod]
public List<AJaxStudy.Model.city> GetCity(string proid)
{
AJaxStudy.BLL.city bcity = new AJaxStudy.BLL.city();
List<AJaxStudy.Model.city> list = bcity.GetListModel("father='"+proid+"'");
return list;
}
[WebMethod]
public List<AJaxStudy.Model.area> GetArea(string cityid)
{
AJaxStudy.BLL.area barea = new AJaxStudy.BLL.area();
List<AJaxStudy.Model.area> list = barea.GetListModel("father='" + cityid + "'");
return list;
}

三层里边的方法

DAL

province.cs

//获取数据方法 model实体
public List<Model.province> GetListModel()
{
List<Model.province> list = new List<Model.province>();
DataTable dt=GetList("").Tables[0];
foreach (DaTarow row in dt.Rows)
{
Model.province pro = new Model.province();
pro.id = Convert.ToInt32(row["id"]);
pro.provinceID = row["provinceID"].ToString();
pro.provincename = row["provincename"].ToString();
list.Add(pro);
}
return list;
}

city.cs

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

area.cs

public List<Model.area> GetListModel(string cityid)
{
List<Model.area> list = new List<Model.area>();
DataTable dt = GetList(cityid).Tables[0];
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;
}

GetList()方法

/// <summary>
/// 获得数据列表
/// </summary>
public DataSet GetList(string strWhere)
{
StringBuilder strsql=new StringBuilder();
strsql.Append("select id,areaID,areaname,father ");
strsql.Append(" FROM area ");
if(strWhere.Trim()!="")
{
strsql.Append(" where "+strWhere);
}
return DbHelpersql.Query(strsql.ToString());
}

-----------------------------------三层 有刷新方法---------------------------------------------------

注意：AutopostBack=“true”

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 AJaxpcA
{
public partial class pca : System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
if (!IsPostBack)
{
loadData();
}
}
private void loadData()
{

AJaxStudy.BLL.province bpro = new AJaxStudy.BLL.province();
DataSet ds= bpro.GetList("");
ddlpro.DataSource = ds.Tables[0];
ddlpro.DataTextField = "provincename";
ddlpro.DataValueField = "provinceID";
ddlpro.DataBind();
ddlpro.Items.Insert(0,new ListItem("--请选择--","0"));
}

protected void ddlpro_SelectedindexChanged(object sender,EventArgs e)
{
if (this.ddlarea.Items.Count>0)
{
this.ddlarea.Items.Clear();
ddlarea.Items.Insert(0,"0"));
}
string proid = this.ddlpro.SelectedItem.Value;
//Response.Write(proid);

AJaxStudy.BLL.city bcity = new AJaxStudy.BLL.city();
DataSet ds = bcity.GetList("father='"+proid+"'");
ddlcity.DataSource = ds.Tables[0];
ddlcity.DataTextField = "cityname";
ddlcity.DataValueField = "cityID";
ddlcity.DataBind();
ddlcity.Items.Insert(0,"0"));
//绑定默认显示的市级区划下面所有的县
string cityid = ds.Tables[0].Rows[0]["cityID"].ToString();
AJaxStudy.BLL.area baraer = new AJaxStudy.BLL.area();

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

ddlarea.DataSource = dtarea;
ddlarea.DataTextField = "areaname";
ddlarea.DataValueField = "areaID";
ddlarea.DataBind();
ddlarea.Items.Insert(0,"0"));
}

protected void ddlcity_SelectedindexChanged(object sender,EventArgs e)
{
string cid = this.ddlcity.SelectedItem.Value;

AJaxStudy.BLL.area barea = new AJaxStudy.BLL.area();
DataSet ds = barea.GetList("father='" + cid + "'");
ddlarea.DataSource = ds.Tables[0];
ddlarea.DataTextField = "areaname";
ddlarea.DataValueField = "areaID";
ddlarea.DataBind();
ddlarea.Items.Insert(0,"0"));
}

} }

ajax 实现无刷新实现省市县(区)三级联动

ajax 实现无刷新实现省市县(区)三级联动

总结

以上是小编为你收集整理的ajax 实现无刷新实现省市县(区)三级联动全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

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

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

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 = "111111";
                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.net +jquery 无刷新三级联动的实例代码

ajax.net +jquery 无刷新三级联动的实例代码

复制代码 代码如下:

    <!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>
    <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/loadprovince",
                data: "{}",
                success: function (result) {
                    var ping;
                    for (var i = 0; i < result.d.length; i++) {
                        ping += "<option value=" + result.d[i].provinceID + ">";
                        ping += result.d[i].provincename;
                        ping += "</option>";

                    }
                    $('#Select1').append(ping);

   
                }

   
            })
            $('#Select1').change(function () {
                //第二次选时要记得清空市和县中的内容
                $('#Select2 option:gt(0)').remove();
                $('#Select3 option:gt(0)').remove();
                //在省的改变事件里绑定下一个下来列表（要失掉省的id）

                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/loadcity",
                    data: "{fatherid:'" + $('#Select1 option:selected').val() + "'}",
                    success: function (result) {
                        var str2;
                        for (var i = 0; i < result.d.length; i++) {
                            str2 += "<option value=" + result.d[i].cityID + ">";
                            str2 += result.d[i].cityname;
                            str2 += "</option>";
                        }

                        $('#Select2').append(str2);
                    }
                })
            })
            $('#Select2').change(function () {
                $('#Select3 option:gt(0)').remove();

                $.ajax({
                    type: "post",
                    url: "WebService1.asmx/loadarea",
                    data: "{fatherid:'" + $('#Select2 option:selected').val() + "'}",
                    success: function (result) {
                        var str3;
                        for (var i = 0; i < result.d.length; i++) {
                            str3 += "<option value=" + result.d.areaID + ">";
                            str3 += result.d[i].areaname;
                            str3 += result.d[i].father;

                        }
                        $('#Select3').append(str3);
                    }
                })
            })
        })

    </script>
</head>
<body>
   省：
    <select id="Select1">
        <option>--请选择--</option>
    </select>
    市：
    <select id="Select2">
        <option>--请选择--</option>
    </select>
    县：
    <select id="Select3">
        <option>--请选择--</option>
    </select>
</body>
</html>

webservice:

复制代码 代码如下:

 [WebMethod]//加载省
        public List<Model.province> loadprovince()//为什么要用list因为这里出从前的值不可能一个实例是多个model实例，一个实例就是一条记载这样做防止字段错误
        {
            BLL.province bp = new BLL.province();
            List<Model.province> list=bp.getlistModel();
            return list;
        }
        [WebMethod]//加载市
        public List<Model.city> loadcity(string fatherid)
        {
            BLL.city bc = new BLL.city();
            List<Model.city> list = bc.getlistmodel(fatherid);
            return list;
        }
        [WebMethod]//加载县
        public List<Model.area> loadarea(string fatherid)
        {
            BLL.area ba = new BLL.area();
            List<Model.area> list = ba.getlistmodel(fatherid);
            return list;

        }
    }
}

DAL--area

复制代码 代码如下:

public System.Collections.Generic.List<Model.area> getlistmodel(string fatherid)
        {
            System.Collections.Generic.List<Model.area> list = new System.Collections.Generic.List<Model.area>();
            DataTable dt = GetList("father=" + fatherid + "").Tables[0];
            foreach (DaTarow row in dt.Rows)
            {
                Model.area ma = new Model.area();
                ma.areaID = row["areaID"].ToString();
                ma.areaname = row["areaname"].ToString();
                ma.father = row["father"].ToString();
                list.Add(ma);
            }
            return list;
        }


Dal--city

复制代码 代码如下:

 public System.Collections.Generic.List<Model.area> getlistmodel(string fatherid)
        {
            System.Collections.Generic.List<Model.area> list = new System.Collections.Generic.List<Model.area>();
            DataTable dt = GetList("father=" + fatherid + "").Tables[0];
            foreach (DaTarow row in dt.Rows)
            {
                Model.area ma = new Model.area();
                ma.areaID = row["areaID"].ToString();
                ma.areaname = row["areaname"].ToString();
                ma.father = row["father"].ToString();
                list.Add(ma);
            }
            return list;
        }
    }


DAL-provience

复制代码 代码如下:

public System.Collections.Generic.List<Model.province> getlistModel()
        {
            //将要查的内容以实例的方式返回
            //这里要做的就是要建立list并将list用model实例填满，而model要用一个方法失掉数据并添加到model中
          //建list实例
            System.Collections.Generic.List<Model.province> list = new System.Collections.Generic.List<Model.province>();
            //已经有了的失掉数据的方法就不用自己写了通过调用Getlist的方法操纵数据库拿到数据
            DataTable dt = GetList("").Tables[0];
            //拿到数据后就需要将数据添加到model实例中了

            foreach (DaTarow row in dt.Rows)
            {
                //每一行都是个实例所以要将model的放在循环里面
                Model.province mp = new Model.province();
                mp.provinceID = row["provinceID"].ToString();
                mp.provincename = row["provincename"].ToString();
                list.Add(mp);//没添加完一个实例都要放到list中
            }
            return list;


        }

ajax不刷新的情况下省市县三级联动

ajax不刷新的情况下省市县三级联动

这次给大家带来ajax不刷新的情况下省市县三级联动，ajax不刷新实现省市县三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下

效果图：

实现代码：

1、html：

  <title></title>
    <style>
    select
    {
      width: 150px;
    }
  </style>
  <script></script>
  <script>
    $(function () {
      $.ajax({
        type: "post",
        contentType: "application/json",
        url: "WebService1.asmx/GetProvince",
        data: "{}",
        success: function (result) {
          var stroption = &#39;&#39;;
          for (var i = 0; i < result.d.length; i++) {
            stroption += &#39;<option value=&#39; + result.d[i].provinceID + &#39;>&#39;;
            stroption += result.d[i].provincename;
            stroption += &#39;&#39;;
          }
          $(&#39;#seprovince&#39;).append(stroption);
        }
      })
      $(&#39;#seprovince&#39;).change(function () {
       $(&#39;#secity option:gt(0)&#39;).remove();
        $(&#39;#searea option:gt(0)&#39;).remove();
        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetCItyByPro",
          data: "{proid:&#39;" + $(this).val() + "&#39;}",
          success: function (result) {
            var strocity = &#39;&#39;;
            for (var i = 0; i < result.d.length; i++) {
              strocity += &#39;<option value=&#39; + result.d[i].cityID + &#39;>&#39;;
              strocity += result.d[i].cityname;
              strocity += &#39;&#39;;
            }
            $(&#39;#secity&#39;).append(strocity);
          }
        })
      })
      $(&#39;#secity&#39;).change(function () {
        $(&#39;#searea option:gt(0)&#39;).remove();
        $.ajax({
          type: "post",
          contentType: "application/json",
          url: "WebService1.asmx/GetAreaByCity",
          data: "{cityid:&#39;" + $(this).val() + "&#39;}",
          success: function (result) {
            var stroarea = &#39;&#39;;
            for (var i = 0; i < result.d.length; i++) {
              stroarea += &#39;<option value=&#39; + result.d[i].areaID + &#39;>&#39;;
              stroarea += result.d[i].areaname;
              stroarea += &#39;&#39;;
            }
            $(&#39;#searea&#39;).append(stroarea);
          }
        })
      })
    })
  </script>
 
登录后复制
                                                                                                                          
        用户名                       
        密码                       
        确认密码                       
        邮箱                       
        地址                         省         市         县       

2、WebService1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace 省市县三级联动
{
  /// <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;
    }
  }
}</model.area></model.area></model.city></model.city></model.province></model.province>
登录后复制

在三层的Bll层中的city.cs和area.cs中分别添加以下属性

//city.cs：
  public List<model.city> GetListModel(string strsql)
    {
      return dal.GetListModel(strsql);
    }
//area.cs：
   public List<model.area> GetListModel(string strsql)
    {
      return dal.GetListModel(strsql);
    }</model.area></model.city>
登录后复制

在三层的DAL层中的city.cs和area.cs中分别添加以下方法

//city.cs：
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.cs：
  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;
    }</model.area></model.area></model.area></model.city></model.city></model.city>
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

AJAX实现显示页面后才加载

AJAX怎么实现异步刷新和局部刷新

以上就是ajax不刷新的情况下省市县三级联动的详细内容，更多请关注php中文网其它相关文章！

关于loner_li AJax 无刷新 省市县三级联动和最终版的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于ajax 实现无刷新实现省市县(区)三级联动、Ajax 实现省市县 三级联动【无刷新】三层 | 三级联动—有刷新、ajax.net +jquery 无刷新三级联动的实例代码、ajax不刷新的情况下省市县三级联动等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇$.ajax({ url:"getCounterOfShop.action", type:"post",

下一篇loner_li AJax 无刷新 省市县三级联动（webservice+sqlhelp）客户端控件版和 有刷新 web版

相关文章