===============================腳本部分 ===========================================
<script type="text/javascript" language="javascript" >
//城市------------------------------
function cityResult()
{
var city=document.getElementById("ddlPrivince");
test.AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
}
function get_city_Result_CallBack(response)
{
if (response.value != null)
{
//debugger;
document.all("ddlCity").length=1;
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
{
var name=ds.Tables[0].Rows[i].NAME;
var id=ds.Tables[0].Rows[i].ID;
document.all("ddlCity").options.add(new Option(name,id));
}
}
}
areaResult();
return
}
//市區----------------------------------------
function areaResult()
{
var area=document.getElementById("ddlCity");
test.AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
}
function get_area_Result_CallBack(response)
{
if (response.value != null)
{
document.all("ddlSCity").length=1;
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
{
var name=ds.Tables[0].Rows[i].NAME;
var id=ds.Tables[0].Rows[i].ID;
document.all("ddlSCity").options.add(new Option(name,id));
}
}
}
return
}
function getData()
{
var province=document.getElementById("ddlPrivince");
var pindex = province.selectedIndex;
var pValue = province.options[pindex].value;
var pText = province.options[pindex].text;
var city=document.getElementById("ddlCity");
var cindex = city.selectedIndex;
var cValue = city.options[cindex].value;
var cText = city.options[cindex].text;
var area=document.getElementById("ddlSCity");
var aindex = area.selectedIndex;
var aValue = area.options[aindex].value;
var aText = area.options[aindex].text;
var txt=document.getElementById("TextBox1");
document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"區:"+aValue+"|"+aText;
}
</script>
==========================前臺頁面===================================
<body οnlοad="cityResult();" >
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlPrivince" runat="server">
<asp:ListItem Text="==請選擇=="></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
<asp:ListItem Text="==請選擇=="></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlSCity" runat="server">
<asp:ListItem Text="==請選擇=="></asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="getData();"/>
</div>
</form>
</body>
======================後臺的ajax類部分====================
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using AjaxPro;
namespace test
{
public class AjaxMethod
{
#region GetProvinceList
public static DataSet GetProvinceList()
{
string sql = "select * from memberarea where pid='0'";
return GetDataSet(sql);
}
#endregion
#region GetCityList
[AjaxPro.AjaxMethod]
public DataSet GetCityList(int provinceid)
{
string sql = "select * from memberarea where pid=" + provinceid;
return GetDataSet(sql);
}
#endregion
#region GetAreaList
[AjaxPro.AjaxMethod]
public DataSet GetAreaList(int cityid)
{
string sql = "select * from memberarea where pid=" + cityid;
return GetDataSet(sql);
}
#endregion
#region GetDataSet
public static DataSet GetDataSet(string sql)
{
string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString);
DataSet ds=new DataSet();
sda.Fill(ds);
return ds;
}
#endregion
}
}
==================默認後臺部分=======================
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
namespace test
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
if (!Page.IsPostBack)
{
this.ddlPrivince.DataSource = AjaxMethod.GetProvinceList();
this.ddlPrivince.DataTextField = "name";
this.ddlPrivince.DataValueField = "id";
this.ddlPrivince.DataBind();
this.ddlPrivince.Attributes.Add("onchange", "cityResult();");
this.ddlCity.Attributes.Add("onchange", "areaResult();");
}
}
}
}
