Ajax实现无刷新三联动下拉框
Ajax实现无刷新三联动下拉框
发布时间:2016-12-29 来源:查字典编辑
摘要:Ajax实现无刷新三联动下拉框//城市------------------------------functioncityResult(){...

<HTML>

<HEAD>

<title>Ajax实现无刷新三联动下拉框</title>

<metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR">

<metacontent="C#"name="CODE_LANGUAGE">

<metacontent="JavaScript"name="vs_defaultClientScript">

<metacontent="http://schemas.microsoft.com/intellisense/ie5"name="vs_targetSchema">

<SCRIPTlanguage="javascript">

//城市------------------------------

functioncityResult()

{

varcity=document.getElementById("DropDownList1");

AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);

}

functionget_city_Result_CallBack(response)

{

if(response.value!=null)

{

//debugger;

document.all("DropDownList2").length=0;

vards=response.value;

if(ds!=null&&typeof(ds)=="object"&&ds.Tables!=null)

{

for(vari=0;i<ds.Tables[0].Rows.length;i++)

{

varname=ds.Tables[0].Rows[i].city;

varid=ds.Tables[0].Rows[i].cityID;

document.all("DropDownList2").options.add(newOption(name,id));

}

}

}

return

}

//市区----------------------------------------

functionareaResult()

{

vararea=document.getElementById("DropDownList2");

AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);

}

functionget_area_Result_CallBack(response)

{

if(response.value!=null)

{

document.all("DropDownList3").length=0;

vards=response.value;

if(ds!=null&&typeof(ds)=="object"&&ds.Tables!=null)

{

for(vari=0;i<ds.Tables[0].Rows.length;i++)

{

varname=ds.Tables[0].Rows[i].area;

varid=ds.Tables[0].Rows[i].areaID;

document.all("DropDownList3").options.add(newOption(name,id));

}

}

}

return

}

functiongetData()

{

varprovince=document.getElementById("DropDownList1");

varpindex=province.selectedIndex;

varpValue=province.options[pindex].value;

varpText=province.options[pindex].text;

varcity=document.getElementById("DropDownList2");

varcindex=city.selectedIndex;

varcValue=city.options[cindex].value;

varcText=city.options[cindex].text;

vararea=document.getElementById("DropDownList3");

varaindex=area.selectedIndex;

varaValue=area.options[aindex].value;

varaText=area.options[aindex].text;

vartxt=document.getElementById("TextBox1");

document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;

}

</SCRIPT>

</HEAD>

<bodyms_positioning="GridLayout">

<formid="Form1"method="post"runat="server">

<TABLEid="Table1"style="Z-INDEX:101;LEFT:96px;POSITION:absolute;TOP:32px"cellSpacing="1"

cellPadding="1"width="300"border="1"bgColor="#ccff66">

<TR>

<TD>省市</TD>

<TD><asp:dropdownlistid="DropDownList1"runat="server"></asp:dropdownlist></TD>

</TR>

<TR>

<TD>城市</TD>

<TD><asp:dropdownlistid="DropDownList2"runat="server"></asp:dropdownlist></TD>

</TR>

<TR>

<TD>市区</TD>

<TD><asp:dropdownlistid="DropDownList3"runat="server"></asp:dropdownlist></TD>

</TR>

</TABLE>

<asp:TextBoxid="TextBox1"style="Z-INDEX:102;LEFT:416px;POSITION:absolute;TOP:48px"runat="server"

Width="424px"></asp:TextBox><INPUTstyle="Z-INDEX:103;LEFT:456px;WIDTH:56px;POSITION:absolute;TOP:96px;HEIGHT:24px"

type="button"value="test"onclick="getData();">

</form>

</body>

</HTML>2.cs代码

usingSystem;

usingSystem.Collections;

usingSystem.ComponentModel;

usingSystem.Data;

usingSystem.Drawing;

usingSystem.Web;

usingSystem.Web.SessionState;

usingSystem.Web.UI;

usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.HtmlControls;

namespaceAjaxTest

{

/**////<summary>

///SummarydescriptionforWebForm1.

///</summary>

publicclassWebForm1:System.Web.UI.Page

{

protectedSystem.Web.UI.WebControls.DropDownListDropDownList1;

protectedSystem.Web.UI.WebControls.DropDownListDropDownList2;

protectedSystem.Web.UI.WebControls.TextBoxTextBox1;

protectedSystem.Web.UI.WebControls.DropDownListDropDownList3;

privatevoidPage_Load(objectsender,System.EventArgse)

{

Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));

if(!Page.IsPostBack)

{

this.DropDownList1.DataSource=AjaxMethod.GetProvinceList();

this.DropDownList1.DataTextField="province";

this.DropDownList1.DataValueField="provinceID";

this.DropDownList1.DataBind();

this.DropDownList1.Attributes.Add("onclick","cityResult();");

this.DropDownList2.Attributes.Add("onclick","areaResult();");

}

}

WebFormDesignergeneratedcode#regionWebFormDesignergeneratedcode

overrideprotectedvoidOnInit(EventArgse)

{

//

//CODEGEN:ThiscallisrequiredbytheASP.NETWebFormDesigner.

//

InitializeComponent();

base.OnInit(e);

}

/**////<summary>

///RequiredmethodforDesignersupport-donotmodify

///thecontentsofthismethodwiththecodeeditor.

///</summary>

privatevoidInitializeComponent()

{

this.Load+=newSystem.EventHandler(this.Page_Load);

}

#endregion

}

}3.AjaxMethod

usingSystem;

usingSystem.Data;

usingSystem.Data.SqlClient;

namespaceAjaxTest

{

/**////<summary>

///SummarydescriptionforAjaxMethod.

///</summary>

publicclassAjaxMethod

{

GetProvinceList#regionGetProvinceList

publicstaticDataSetGetProvinceList()

{

stringsql="select*fromprovince";

returnGetDataSet(sql);

}

#endregion

GetCityList#regionGetCityList

[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]

publicDataSetGetCityList(intprovinceid)

{

stringsql="select*fromcitywherefather="+provinceid;

returnGetDataSet(sql);

}

#endregion

GetAreaList#regionGetAreaList

[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]

publicDataSetGetAreaList(intcityid)

{

stringsql="select*fromareawherefather="+cityid;

returnGetDataSet(sql);

}

#endregion

GetDataSet#regionGetDataSet

publicstaticDataSetGetDataSet(stringsql)

{

stringConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];

SqlDataAdaptersda=newSqlDataAdapter(sql,ConnectionString);

DataSetds=newDataSet();

sda.Fill(ds);

returnds;

}

#endregion

}

}4.web.config

<httpHandlers>

<addverb="POST,GET"path="ajax/*.ashx"type="Ajax.PageHandlerFactory,Ajax"/>

</httpHandlers>5.ajax.dll下载/Files/singlepine/Ajax.rar

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新AJAX相关学习
热门AJAX相关学习
编程开发子分类