Ajax中怎么实现无刷新三联动下拉框功能

Ajax中怎么实现无刷新三联动下拉框功能,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

创新互联建站专注于拱墅网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供拱墅营销型网站建设,拱墅网站制作、拱墅网页设计、拱墅网站官网定制、重庆小程序开发服务,打造拱墅网络公司原创品牌,更为您提供拱墅网站排名全网营销落地服务。



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




 
//城市------------------------------
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   {
   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   {
     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;
}




cellPadding="1" width="300" border="1" bgColor="#ccff66">

省市



城市



市区



Width="424px">type="button" value="test" onclick="getData();">


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 description for WebForm1.
/// 

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);
}

/**//// 
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// 

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 description for AjaxMethod.
/// 

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


5.ajax.dll下载/Files/singlepine/Ajax.rar

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


分享文章:Ajax中怎么实现无刷新三联动下拉框功能
文章出自:http://myzitong.com/article/pcgops.html