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

汨汨_Angel

汨汨_Angel

2016-02-19 12:27

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的Ajax实现无刷新三联动下拉框,过去的都会过去,迎接崭新的开始,释放更美好的自己。
HTML
HEAD
titleAjax实现无刷新三联动下拉框/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; ids.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; ids.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
TDasp:dropdownlist id="DropDownList1" runat="server"/asp:dropdownlist/TD
/TR
TR
TD城市/TD
TDasp:dropdownlist id="DropDownList2" runat="server"/asp:dropdownlist/TD
/TR
TR
TD市区/TD
TDasp: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:TextBoxINPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
type="button" value="test" onclick="getData();"
/form
/body
/HTML2.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" /
/httpHandlers5.ajax.dll下载/Files/singlepine/Ajax.rar
展开更多 50%)
分享

猜你喜欢

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

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

Ajax联动下拉框的实现例子

Web开发
Ajax联动下拉框的实现例子

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

使用AjaxPro开发四级无刷新联动下拉框

Web开发
使用AjaxPro开发四级无刷新联动下拉框

Jquery实现无刷新DropDownList联动实现代码

Web开发
Jquery实现无刷新DropDownList联动实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax实现无刷新树

Web开发
Ajax实现无刷新树

ajax 自动完成下拉框 自动提示位置问题

Web开发
ajax 自动完成下拉框 自动提示位置问题

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

AJAX乱码解决新方法

AJAX乱码解决新方法

在桌面上创建QQ好友快捷方式想聊就聊

在桌面上创建QQ好友快捷方式想聊就聊
下拉加载更多内容 ↓