-
Ajax实现无刷新三联动下拉框
![](https://www.cnblogs.com/images/cnblogs_com/singlepine/XmlHttpdropdownlist.JPG)
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">
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<SCRIPT language="javascript">
//城市------------------------------
function cityResult()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var city=document.getElementById("DropDownList1");
AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
}
function get_city_Result_CallBack(response)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (response.value != null)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//debugger;
document.all("DropDownList2").length=0;
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var area=document.getElementById("DropDownList2");
AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
}
function get_area_Result_CallBack(response)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (response.value != null)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
document.all("DropDownList3").length=0;
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
if(!Page.IsPostBack)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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();");
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
this.Load += new System.EventHandler(this.Page_Load);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
#endregion
}
}
3.AjaxMethod
using System;
using System.Data;
using System.Data.SqlClient;
namespace AjaxTest
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
/// Summary description for AjaxMethod.
/// </summary>
public class AjaxMethod
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
GetProvinceList#region GetProvinceList
public static DataSet GetProvinceList()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string sql="select * from province";
return GetDataSet(sql);
}
#endregion
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
GetCityList#region GetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataSet GetCityList(int provinceid)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string sql="select * from city where father="+provinceid;
return GetDataSet(sql);
}
#endregion
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
GetAreaList#region GetAreaList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataSet GetAreaList(int cityid)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string sql="select * from area where father="+cityid;
return GetDataSet(sql);
}
#endregion
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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.rar6.真实数据库下载
area1.rar7.源代码下载
AjaxTest.rar
-
相关阅读:
Zk学习笔记——权限控制
guava学习笔记
Elasticsearch学习笔记——别名
Kafka学习笔记——存储结构
分布式协议——Paxos、Raft和ZAB
图解 Java 中的数据结构及原理!
牛逼哄哄的 Lambda 表达式,简洁优雅就是生产力!
你必须了解Spring的生态
盘点 35 个 Apache 顶级项目,我拜服了…
前后端分离如何做权限控制设计?
-
原文地址:https://www.cnblogs.com/timy/p/853380.html
Copyright © 2020-2023
润新知