Ajax实现无刷新三联动下拉框
程序员文章站
2022-05-03 08:05:47
<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
<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
上一篇： 常用Javascript CDN 对比
下一篇： JDK 7 第5个里程碑版本发布