注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

_

_

 
 
 

日志

 
 

用ajax实现dropdownlist多级联动实例  

2014-09-21 04:46:25|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

用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

分类: ASP.NET

  评论这张
 
阅读(255)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017