用ajax实现dropdownlist多级联动实例
经常用dropdownlist绑定数据，涉及到多级联动的问题，刷新页面不太好，于是花了点时间，用AjaxPro来实现无刷新绑定DropDownList数据的问题。
--------------------------------------------------------------------------------
实例：
实现省、市、县三级DropDownList数据无刷新绑定
思想：
在页面载入时从数据库中读取并绑定省份数据，然后根据省份当前的DropDownList所选id来绑定市数据，最后根据市的DropDownList所选id来绑定县数据。
然后当用户改变省的DropDownList，用AjaxPro技术传值(当前所选的省id),根据所选的省id来绑定市与县的DropDownList，当改变市的DropDownList时原理一样。.cs页面从数据库中等到的数据以xml的形式传回给页面，然后用javascript来分析处理绑定。
看不明白没关系，看下代码实现就明白了。
效果图示：
准备：
首先需要将AjaxPro.2部署到您的项目中，如果部署AjaxPro.2请查看这里《查看如何部署ajaxpro》。
代码：
页面中的三个dropdownlist,分别是省、市、县：
<asp:DropDownList ID="ddlp" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlc" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlx" runat="server">
</asp:DropDownList>页面加载时绑定三个DropDownList控件：
protected void Page_Load(object sender, EventArgs e)
{
#region 注册无刷新
AjaxPro.Utility.RegisterTypeForAjax(typeof(alldeadmin_usercontrol_areaUc));
#endregion
if (!this.IsPostBack)
{
this.bindproData();//绑定省份
this.bindcityData(); //市数据绑定
this.bindxianData();//县级数据绑定
}
}具体对三个DropDownList控件绑定的代码：
/// <summary>
/// 省份数据dropdownlist绑定
/// </summary>
private void bindproData()
{
BLL.alldeadmin.areabll myareabll = new areabll();
this.ddlp.DataSource = myareabll.GetAllListp();
this.ddlp.DataTextField = "proName";
this.ddlp.DataValueField = "id";
this.ddlp.DataBind();
this.ddlp.Attributes.Add("onchange", "loadCity(opDdlSelect(this));");//当省下拉列表改变时绑定市与县事件，此事件处理程序通过javascript来实现，下面将提到。
}
/// <summary>
///市数据dropdownlist绑定
/// </summary>
private void bindcityData()
{
this.ddlc.DataSource = this.returncityData(this.ddlp.SelectedValue);
this.ddlc.DataTextField = "cityName";
this.ddlc.DataValueField = "id";
this.ddlc.DataBind();
this.ddlc.Attributes.Add("onchange", "loadXian(opDdlSelect(this))");//当市下拉列表改变时绑定县事件，此事件处理程序通过javascript来实现，下面将提到。
}
/// <summary>
///县数据dropdownlist绑定
/// </summary>
private void bindxianData()
{
this.ddlx.DataSource = this.returnxianData(this.ddlc.SelectedValue);
this.ddlx.DataTextField = "xianName";
this.ddlx.DataValueField = "id";
this.ddlx.DataBind();
}从数据库中返回某市的数据和县的数据:
/// <summary>
/// 返回市数据
/// </summary>
private DataSet returncityData(string state)
{
BLL.alldeadmin.areabll myareabll = new areabll();
string tw = " where ProId=" + state;
return myareabll.GetListc(tw);
}
/// <summary>
/// 返回县数据
/// </summary>
private DataSet returnxianData(string state)
{
BLL.alldeadmin.areabll myareabll = new areabll();
string tw = " where cityId=" + state;
return myareabll.GetListx(tw);
}这里是和aspx页面无刷新返回数据的地方：
/// <summary>
/// 无刷新向页面返回市级数据
/// </summary>
/// <param name="state"></param>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string getcity(string state)
{
return returncityData(state).GetXml();
}
/// <summary>
/// 无刷新向页面返回县级数据
/// </summary>
/// <param name="state"></param>
/// <returns></returns>
[AjaxPro.AjaxMethod]
public string getxian(string state)
{
return returnxianData(state).GetXml();
}
前台.aspx页面的javascript处理模块
javascript是对xml处理的，我返回的xml结构为
<script language="javascript" type="text/javascript">
<!--
//返回当前ddl的值(辅助函数）
function opDdlSelect(objectSelect)
{
if(objectSelect!=null)
{
return objectSelect.options[objectSelect.selectedIndex].value;
}
}
//市级数据处理
function loadCity(state)
{
alldeadmin_usercontrol_areaUc.getcity(state,callback);//装载市数据
alldeadmin_usercontrol_areaUc.getxian(state,callbackxian);//装载县数据
}
function callback(res) //回调函数
{
var drp2 = document.getElementById("<%=ddlc.ClientID %>");////因为这个例子是作为用户控件在运行的，所以不能用 javascript直接引用控件名称，需要用控件.ClientID 属性来获取控件的客户端id。
var iteml=drp2.options.length -1;//清空dropdownlist里的项内容
for(var i = 0;i<=iteml;i++)
{
drp2.remove(iteml-i);
}
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
result=res.value;//取得xml数据
oDoc.loadXML(result);
items = oDoc.selectNodes("//NewDataSet/ds");
for (var item = items.nextNode(); item; item = items.nextNode()){
var city = item.selectSingleNode("cityName").nodeTypedValue;
var cid=item.selectSingleNode("id").nodeTypedValue;
var newOption = document.createElement("OPTION");
newOption.text = city;
newOption.value = cid;
drp2.options.add(newOption);
}
}
//县数据处理
function loadXian(state)
{
var getobject = alldeadmin_usercontrol_areaUc.getxian(state,callbackxian);
}
function callbackxian(res) //回调函数
{
var drp2 = document.getElementById("<%=ddlx.ClientID %>");
var iteml=drp2.options.length -1;//清空dropdownlist里的项内容
for(var i = 0;i<=iteml;i++)
{
drp2.remove(iteml-i);
}
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
result=res.value;//取得xml数据
oDoc.loadXML(result);
items = oDoc.selectNodes("//NewDataSet/ds");
for (var item = items.nextNode(); item; item = items.nextNode()){
var city = item.selectSingleNode("xianName").nodeTypedValue;
var cid=item.selectSingleNode("id").nodeTypedValue;
var newOption = document.createElement("OPTION");
newOption.text = city;
newOption.value = cid;
drp2.options.add(newOption);
}
}
-->
</script>
文章来源(WEB开发技术知识库)：http://www.cn-web.com/cnweb/0/483/article/483.html