省市区三级无刷新联动效果示例代码

来源：互联网发布：淘宝无线端优惠券设置编辑：程序博客网时间：2024/06/06 04:49

前台:

<asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 
 案例一：省市区三级无刷新联动 
 
 
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 省份<asp:DropDownList ID="ddlProvince" runat="server" AutoPostBack="True"
 DataTextField="AreaName" DataValueField="AreaId"
 onselectedindexchanged="ddlProvince_SelectedIndexChanged">
 </asp:DropDownList>
  城市
 <asp:DropDownList ID="ddlCity" runat="server" AutoPostBack="True"
 DataTextField="AreaName" DataValueField="AreaId"
 onselectedindexchanged="ddlCity_SelectedIndexChanged">
 </asp:DropDownList>
  区县
 <asp:DropDownList ID="ddlRegion" runat="server" DataTextField="AreaName"
 DataValueField="AreaId" >
 </asp:DropDownList>

籍贯<asp:TextBox ID="txtJiGuan" runat="server" Width="378px"></asp:TextBox>

</ContentTemplate>
</asp:UpdatePanel>

后台:

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

namespace WebApplicationUI
{
    public partial class Content : System.Web.UI.Page
    {
        //(1)登录事件
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                bindProvince();
                bindCityByProvinceID();
                bindAreaByCityID();
            }
        }

       //(2)当省份下拉改变的时候城市数据源重新进行绑定
        protected void ddlCity_SelectedIndexChanged(object sender, EventArgs e)
        {
            bindAreaByCityID();

txtJiGuan.Text = ddlProvince.SelectedItem.Text + "-" + ddlCity.SelectedItem.Text + "-" + ddlRegion.SelectedItem.Text;

}

      //(3)当省份下拉进行改变的时候
        protected void ddlProvince_SelectedIndexChanged(object sender, EventArgs e)
        {
            bindCityByProvinceID();
            bindAreaByCityID();

txtJiGuan.Text = ddlProvince.SelectedItem.Text + "-" + ddlCity.SelectedItem.Text + "-" + ddlRegion.SelectedItem.Text;
}

        //(4)绑定省份数据
        void bindProvince()
        {
            ddlProvince.DataSource = BLL.Region.getProvince();
            ddlProvince.DataBind();

// ddlProvince.Items.Add("全部");//dropdown末尾添加全部选项

        }
        //(5)通过省份ID绑定市数据源
        void bindCityByProvinceID()
        {
            ddlCity.DataSource = BLL.Region.getCity(ddlProvince.SelectedIndex + 1);
            ddlCity.DataBind();
        }
        //(6)通过市ID绑定区域数据源
        void bindAreaByCityID()
        {
            //这里注意后面的参数是要取绑定的市的Value值，因为省市区三级联动表是父子关系表
            ddlRegion.DataSource = BLL.Region.getRegion(Convert.ToInt32( ddlCity.SelectedValue ));
            ddlRegion.DataBind();
        }
    }
}