
1.html代码
<
HTML
>
<
HEAD
>
<
title
>
XmlHttp实现无刷新三联动下拉框
</
title
>
<
meta
name
="GENERATOR"
Content
="Microsoft Visual Studio .NET 7.1"
>
<
meta
name
="CODE_LANGUAGE"
Content
="C#"
>
<
meta
name
="vs_defaultClientScript"
content
="JavaScript"
>
<
meta
name
="vs_targetSchema"
content
="http://schemas.microsoft.com/intellisense/ie5"
>
</
HEAD
>
<
body
MS_POSITIONING
="GridLayout"
>
<
form
id
="Form1"
method
="post"
runat
="server"
>
<
INPUT
style
="Z-INDEX: 102; LEFT: 448px; WIDTH: 56px; POSITION: absolute; TOP: 80px; HEIGHT: 24px"
onclick
="getData();"
type
="button"
value
="保存"
id
="Button1"
name
="Button1"
runat
="server"
>
<
asp:TextBox
id
="TextBox1"
style
="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 80px"
runat
="server"
Width
="424px"
></
asp:TextBox
>
<
asp:DropDownList
id
="DropDownList2"
runat
="server"
style
="Z-INDEX: 103; LEFT: 176px; POSITION: absolute; TOP: 120px"
></
asp:DropDownList
>
<
asp:DropDownList
id
="DropDownList1"
runat
="server"
style
="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 120px"
></
asp:DropDownList
>
<
asp:DropDownList
id
="DropDownList3"
runat
="server"
style
="Z-INDEX: 105; LEFT: 296px; POSITION: absolute; TOP: 120px"
></
asp:DropDownList
><
INPUT
style
="Z-INDEX: 106; LEFT: 8px; WIDTH: 160px; POSITION: absolute; TOP: 176px; HEIGHT: 22px"
type
="hidden"
size
="21"
id
="hidprovince"
runat
="server"
><
INPUT
style
="Z-INDEX: 107; LEFT: 184px; POSITION: absolute; TOP: 176px"
type
="hidden"
id
="hidcity"
runat
="server"
><
INPUT
style
="Z-INDEX: 108; LEFT: 360px; POSITION: absolute; TOP: 176px"
type
="hidden"
id
="hidarea"
runat
="server"
>

<
SCRIPT
LANGUAGE
="JavaScript"
>
<!--
//以XML求取DropDownList2的数据
function XmlPost2(obj)
{
var svalue = obj.value;
var webFileUrl = "?povinceid=" + svalue;
var result = "";
var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
xmlHttp.open("POST", webFileUrl, false);
xmlHttp.send("");
result = xmlHttp.responseText;
if(result != "")
{
document.all("DropDownList2").length=0;
var piArray = result.split(",");
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
document.all("DropDownList2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
else
{
alert(result);
}
}
//以XML求取DropDownList3的数据
function XmlPost3(obj)
{
var svalue = obj.value;
var webFileUrl = "?cityid=" + svalue;
var result = "";
var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
xmlHttp.open("POST", webFileUrl, false);
xmlHttp.send("");
result = xmlHttp.responseText;
if(result != "")
{
document.all("DropDownList3").length=0;
var piArray = result.split(",");
for(var i=0;i<piArray.length;i++)
{
var ary1 = piArray[i].toString().split("|");
document.all("DropDownList3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
}
}
else
{
alert(result);
}
}
function getData()
{
var province=document.getElementById("DropDownList1");
var pindex = province.selectedIndex;
var pValue = province.options[pindex].value;
var pText = province.options[pindex].text;
var city=document.getElementById("DropDownList2");
var cindex = city.selectedIndex;
var cValue = city.options[cindex].value;
var cText = city.options[cindex].text;
var area=document.getElementById("DropDownList3");
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;
document.Form1.hidprovince.value=pValue;
document.Form1.hidcity.value=cValue;
document.Form1.hidarea.value=aValue;
}
//-->
</
SCRIPT
>
</
form
>
</
body
>
</
HTML
>
2.cs代码
public
class
WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DropDownList DropDownList1;
protected System.Web.UI.WebControls.DropDownList DropDownList2;
protected System.Web.UI.WebControls.DropDownList DropDownList3;
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.HtmlControls.HtmlInputHidden hidarea;
protected System.Web.UI.HtmlControls.HtmlInputHidden hidcity;
protected System.Web.UI.HtmlControls.HtmlInputHidden hidprovince;
protected System.Web.UI.HtmlControls.HtmlInputButton Button1;
public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];

GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
{
SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString);
DataSet ds=new DataSet();
sda.Fill(ds);
return ds;
}
#endregion

property#region property
private string povinceid
{
get
{
if(ViewState["povinceid"]!=null && ViewState["povinceid"].ToString()!="")
{
return ViewState["povinceid"].ToString();
}
else
{
if(Request["povinceid"]!=null && Request["povinceid"].ToString()!="")
{
return Request["povinceid"];
}
else
{
return "";
}
}
}
set
{
ViewState["povinceid"]=value;
}
}
private string cityid
{
get
{
if(ViewState["cityid"]!=null && ViewState["cityid"].ToString()!="")
{
return ViewState["cityid"].ToString();
}
else
{
if(Request["cityid"]!=null && Request["cityid"].ToString()!="")
{
return Request["cityid"];
}
else
{
return "";
}
}
}
set
{
ViewState["povinceid"]=value;
}
}
#endregion

Page_Load#region Page_Load
private void Page_Load(object sender, System.EventArgs e)
{
if(!this.IsPostBack)
{
this.down1_bind();
this.DropDownList1.Attributes.Add("onchange","XmlPost2(this);");
this.DropDownList2.Attributes.Add("onchange","XmlPost3(this);");
}
if(povinceid != "")
{
this.down2_bind(povinceid);
}
if(cityid != "")
{
this.down3_bind(cityid);
}
}
#endregion

down2_bind#region down2_bind
private void down2_bind(string id)
{
string mystr = "";
string sql = "select cityID,city from city where father = '" + id + "'";
DataSet ds = GetDataSet(sql);
if(ds.Tables[0].Rows.Count != 0)
{
for(int i=0;i<ds.Tables[0].Rows.Count;i++)
{
mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();
}
mystr = mystr.Substring(1);
}
this.Response.Write(mystr);
this.Response.End();
}
#endregion

down3_bind#region down3_bind
private void down3_bind(string id)
{
string mystr = "";
string sql = "select areaID,area from area where father = '" + id + "'";
DataSet ds = GetDataSet(sql);
if(ds.Tables[0].Rows.Count != 0)
{
for(int i=0;i<ds.Tables[0].Rows.Count;i++)
{
mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();
}
mystr = mystr.Substring(1);
}
this.Response.Write(mystr);
this.Response.End();
}
#endregion

down1_bind#region down1_bind
private void down1_bind()
{
string sql = "select provinceID,province from povince";
DataSet ds = GetDataSet(sql);
this.DropDownList1.DataSource = ds;
this.DropDownList1.DataValueField = "provinceID";
this.DropDownList1.DataTextField = "province";
this.DropDownList1.DataBind();
}
#endregion

Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Button1.ServerClick += new System.EventHandler(this.Button1_ServerClick);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion 
private void Button1_ServerClick(object sender, System.EventArgs e)
{
string sql="insert into testgrid (province,city,area) ";
sql+="values('"+this.hidprovince.Value+"','"+this.hidcity.Value+"','"+this.hidarea.Value+"')";
Response.Write(sql);
}
}
3.数据库/Files/singlepine/area.rar
4."Ajax实现无刷新三联动下拉框"http://singlepine.cnblogs.com/articles/257954.html
本文介绍了一种使用XmlHttpRequest实现的无刷新三级联动下拉框功能,该功能允许用户在选择省级区域后,自动加载对应的市级和区级选项。通过前后端交互,实现了动态更新下拉列表的效果。
423

被折叠的 条评论
为什么被折叠?



