Ajax实现无刷新三联动下拉框

重要的人越来越少,剩下的越来越重要。拼你想要的,争你没有的。要想人前显贵,就得背后遭罪。最穷不过要饭,不死终会出头!
<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实现无刷新三联动下拉框到此结束。我们要学着面对苦难,学着把生活中的苦难当成一支支蒲公英,随着自然的风流动飘扬,以最轻松愉快的心态放飞在青春浪漫的道场。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
layui Ajax请求给下拉框赋值的实例

ajax请求后台得到json数据后动态生成树形下拉框的方法

Ajax获取php返回json数据动态生成select下拉框的实例

AJAX级联下拉框的简单实现案例

基于Ajax实现下拉框联动显示数据