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

2016-02-19 12:27 29 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的Ajax实现无刷新三联动下拉框,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

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

来源:http://www.tulaoshi.com/n/20160219/1600930.html

延伸阅读
标签: Web开发
动态提示的下拉框 a{color:red;text-decoration:none;font-size:12px} 动态提示的下拉框
标签: Web开发
服务器弱智,请自行将代码中包含全角select的部分替换为半角字符。  程序代码 script type="text/javascript" var childCreate=false; function Offset(e) //取标签的绝对位置 { var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight-2; while(e=e.offsetParent) {   t+=e.offsetTop;...
标签: Web开发
第一段是我们的XML数据源,也就是要绑定的数据,METADATA结点相当于表名, AUTHOR、GENERATOR、PAGETYPE、ABSTRACT相当于列名,下面的Table是用来显示数据的容器。<TABLE dataSrc="#xmlData" border=1>是指定Table的数据源,<span dataFld="AUTHOR">loading...</span>绑定字段名。 --------------------------------------------------...
标签: Web开发
在一个jsp页面实现二级下拉框联动,实时读取数据库数据,这个方法非常使用,只需要修改很小的地方就可以使用。设计的文件,serch.jsp,main.js,bytetostr.js, 先讲一下main.js,这是javascript,其中注意修改jsp页面名称。    function findObject(fName,initValue)...{    var xmlhttp = new Ac...
标签: ASP
       表单中,第一个列表框有a,b,c三个选项,当用户选中a时,第二个列表框显示a1,a2,a3三个选项,(若用户在第一个列表框中选择b,第二个列表框显示b1,b2,b3,以此类推),当用户在第二个列表框中选择a1,第三个列表框中显示a11,a12,a13。请问如何实现?   -----------------------------------...

经验教程

19

收藏

40
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部