轉: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>
<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程式碼
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.GetPovinceList();
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
}
{
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.GetPovinceList();
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
{
GetPovinceList
GetCityList
GetAreaList
GetDataSet
}
}
using System.Data;
using System.Data.SqlClient;
namespace AjaxTest
{
/// <summary>
/// Summary description for AjaxMethod.
/// </summary>
public class AjaxMethod
{
GetPovinceList
GetCityList
GetAreaList
GetDataSet
}
}
4.web.config
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
5.ajax.dll下載/Files/singlepine/Ajax.rar
6.真實資料庫下載/Files/singlepine/area.rar
7.具體配置參見http://singlepine.cnblogs.com/articles/253393.html
8.原始碼下載/Files/singlepine/AjaxTest.rar
9.XmlHttp實現無重新整理三聯動下拉框
相關文章
- ajax實現列表連動的嘗試
- php中用ajax實現二級省市級聯PHP
- 用Vue實現省市區三級聯動Vue
- 基於ThinkPHP+AJAX的省市區三級聯動PHP
- JavaScript Ajax 實現JavaScript
- 自己實現AJAX
- 小程式:動態資料實現三級聯動選擇器
- 使用 laravel8 + ajax 實現無限滾動Laravel
- ajax實現輪詢
- 原生的Ajax實現
- 自己動手實現Android中的三級快取框架Android快取框架
- layui自定義ajax左側三級選單UI
- js 實現二級聯動JS
- Js 實現五級聯動JS
- 用Vue、element-ui、axios實現省市區三級聯動VueUIiOS
- 三級 NestedScroll 巢狀滾動實踐巢狀
- ajax方法簡單實現
- java實現連結串列反轉Java
- TypeScript 實現連結串列反轉TypeScript
- 完成 ajax.net 的cross domain ajax功能實現ROSAI
- [Echarts視覺化] 二.php和ajax連線資料庫實現動態資料視覺化Echarts視覺化PHP資料庫
- Ajax的技術核心實現動態無重新整理
- 原生JS實現二級聯動JS
- 【JAVA】ArrayList手動實現(初級)Java
- 使用LayUI實現AJAX分頁UI
- AJAX實現檔案下載----
- ajax實現檔案上傳
- KKB : Jquery實現Ajax請求jQuery
- 一對一聊天ajax實現
- 原生JavaScript實現AJAX、JSONPJavaScriptJSON
- 三步實現Cool Button (轉)
- [轉載] MySql實現遠端連線MySql
- jQuery實現省市區三級聯動完整版原始碼演示下載jQuery原始碼
- 直播電商軟體開發,商城商品實現三方連結跳轉的
- 實現浮動按鈕 (轉)
- javascript實現的三級下拉導航選單JavaScript
- 連載三:Oracle升級文件大全Oracle
- 重寫ajax實現session超時跳轉到登陸頁面Session