當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

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

發布時間：2023/11/27 生活经验 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 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????????
????}
} 3.AjaxMethod
using?System;
using?System.Data;
using?System.Data.SqlClient;
namespace?AjaxTest
{
????///?<summary>
????///?Summary?description?for?AjaxMethod.
????///?</summary>
????public?class?AjaxMethod
????{
????????GetProvinceList

????????GetCityList

????????GetAreaList
????
????????GetDataSet
????}
} 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实例