Ajax实现无刷新三联动下拉框
生活随笔
收集整理的這篇文章主要介紹了
Ajax实现无刷新三联动下拉框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.html代碼
<HTML>
????<HEAD>
????????<title>Ajax實現無刷新三聯動下拉框</title>
????????<meta?content="Microsoft?Visual?Studio?.NET?7.1"?name="GENERATOR">
????????<meta?content="C#"?name="CODE_LANGUAGE">
????????<meta?content="JavaScript"?name="vs_defaultClientScript">
????????<meta?content="http://schemas.microsoft.com/intellisense/ie5"?name="vs_targetSchema">
????????<SCRIPT?language="javascript">????????????
????????????//城市------------------------------
????????????function?cityResult()?
????????????{?
????????????????var?city=document.getElementById("DropDownList1");
????????????????AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
????????????}
????????????
????????????function?get_city_Result_CallBack(response)
????????????{
????????????????if?(response.value?!=?null)
????????????????{????????????????????
????????????????????//debugger;
????????????????????document.all("DropDownList2").length=0; ????????????
????????????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].city;
????????????????var?id=ds.Tables[0].Rows[i].cityID;
????????????????document.all("DropDownList2").options.add(new?Option(name,id));
????????????????}
????????????????????}
????????????????}????????????????
????????????????return
????????????}
????????????//市區----------------------------------------
????????????function?areaResult()?
????????????{?
????????????????var?area=document.getElementById("DropDownList2");
????????????????AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
????????????}
????????????function?get_area_Result_CallBack(response)
????????????{
????????????????if?(response.value?!=?null)
????????????????{????????????????????
????????????????????document.all("DropDownList3").length=0; ????????????
????????????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].area;
????????????????var?id=ds.Tables[0].Rows[i].areaID;
????????????????document.all("DropDownList3").options.add(new?Option(name,id));
????????????????}????????????????
????????????????????}
????????????????}
????????????????return
????????????}
????????????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;
????????????}
????????</SCRIPT>
????</HEAD>
????<body?ms_positioning="GridLayout">
????????<form?id="Form1"?method="post"?runat="server">
????????????<TABLE?id="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:dropdownlist?id="DropDownList1"?runat="server"></asp:dropdownlist></TD>
????????????????</TR>
????????????????<TR>
????????????????????<TD>城市</TD>
????????????????????<TD><asp:dropdownlist?id="DropDownList2"?runat="server"></asp:dropdownlist></TD>
????????????????</TR>
????????????????<TR>
????????????????????<TD>市區</TD>
????????????????????<TD><asp:dropdownlist?id="DropDownList3"?runat="server"></asp:dropdownlist></TD>
????????????????</TR>
????????????</TABLE>
????????????<asp:TextBox?id="TextBox1"?style="Z-INDEX:?102;?LEFT:?416px;?POSITION:?absolute;?TOP:?48px"?runat="server"
????????????????Width="424px"></asp:TextBox><INPUT?style="Z-INDEX:?103;?LEFT:?456px;?WIDTH:?56px;?POSITION:?absolute;?TOP:?96px;?HEIGHT:?24px"
????????????????type="button"?value="test"?onclick="getData();">
????????</form>
????</body>
</HTML> 2.cs代碼
using?System;
using?System.Collections;
using?System.ComponentModel;
using?System.Data;
using?System.Drawing;
using?System.Web;
using?System.Web.SessionState;
using?System.Web.UI;
using?System.Web.UI.WebControls;
using?System.Web.UI.HtmlControls;
namespace?AjaxTest
{
????/**////?<summary>
????///?Summary?description?for?WebForm1.
????///?</summary>
????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.TextBox?TextBox1;
????????protected?System.Web.UI.WebControls.DropDownList?DropDownList3;
????
????????private?void?Page_Load(object?sender,?System.EventArgs?e)
????????{????
????????????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();");
????????????}
????????}
????????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.Load?+=?new?System.EventHandler(this.Page_Load);
????????}
????????#endregion????????
????}
} 3.AjaxMethod
using?System;
using?System.Data;
using?System.Data.SqlClient;
namespace?AjaxTest
{
????/**////?<summary>
????///?Summary?description?for?AjaxMethod.
????///?</summary>
????public?class?AjaxMethod
????{
????????GetProvinceList#region?GetProvinceList
????????public?static?DataSet?GetProvinceList()
????????{
????????????string?sql="select?*?from?province";
????????????return?GetDataSet(sql);
????????}
????????#endregion
????????GetCityList#region?GetCityList
????????[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
????????public??DataSet?GetCityList(int?provinceid)
????????{
????????????string?sql="select?*?from?city?where?father="+provinceid;
????????????return?GetDataSet(sql);????????????
????????}
????????#endregion
????????GetAreaList#region?GetAreaList
????????[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
????????public??DataSet?GetAreaList(int?cityid)
????????{
????????????string?sql="select?*?from?area?where?father="+cityid;
????????????return?GetDataSet(sql);????????????
????????}
????????#endregion
????
????????GetDataSet#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
????}
} 4.web.config
<httpHandlers>
????????????<add?verb="POST,GET"?path="ajax/*.ashx"?type="Ajax.PageHandlerFactory,?Ajax"?/>
????</httpHandlers> 5.ajax.dll下載/Files/singlepine/Ajax.rar
6.真實數據庫下載area1.rar
7.源代碼下載AjaxTest.rar ?
總結
以上是生活随笔為你收集整理的Ajax实现无刷新三联动下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ajax简单示例之改变下拉框动态生成表格
- 下一篇： php与Ajax实例