经常用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

转载于:https://www.cnblogs.com/yongheng178/archive/2008/09/02/1282030.html

用ajax实现dropdownlist多级联动实例相关推荐

  1. ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码

    本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增 ...

  2. php dropdownlist,php 下拉列表多级联动dropDownList示例代码

    DropDownList控件又称下拉列表框控件, 控件 列表 中的多行数 据 以隐含 的形式表 示 出 来,当用户需要选择所需列表项时,通过点击 "下三角 "图形 展示 ,用户每次 ...

  3. 全国省市县无刷新多级联动菜单

    全国省市县无刷新多级联动菜单 <html> <head> <title>省市县关联菜单</title> <meta http-equiv=&quo ...

  4. ThinkPHP + Ajax 实现2级联动下拉菜单

    为什么80%的码农都做不了架构师?>>>    首先是数据库的设计.分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父 ...

  5. 多级联动下拉菜单插件:jquery.cxselect.js

    话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果.后来百度了下,在此做个总结吧. 下面是以一名php程序员的角度来分析的...可 ...

  6. yii2地址多级联动

    <div>         查看地区:<select class="region" name="region[]">           ...

  7. JavaScript 多级联动浮动菜单

    请到这里看09-08-18更新版本 类似的多级浮动菜单网上也很多实例,但大部分都是只针对一种情况或不够灵活,简单说就是做死了的. 所以我就想到做一个能够自定义菜单的,有更多功能的多级浮动菜单. 而其中 ...

  8. picker多选 vant_Vant picker 多级联动操作

    官网地址:链接 官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的. 度娘也没有找到,花了大半天爬坑试错. 搭配弹出层使用 const citys = [ // 我们习惯的格式. 可以后台给 ...

  9. 多级联动(三级联动)

    多级联动 原理 选中顶级分类,查询出顶级分类对应的二级分类至下啦菜单,选择出二级类,查询出二级分类对应的三级分类,这个效果就是多级联动 原始实现思路 1.定义路由 2.查询顶级分类(pid=0) 发送 ...

最新文章

  1. 19.Linux_Jni多线程操作
  2. web 静态页面和动态页面的区别
  3. 顶级程序员的生活是怎样的? 网友: 很后悔, 找不到女朋友!
  4. background image
  5. 18、java中的泛型
  6. 后端 java ee_刷新器-Java EE 7后端十大功能
  7. 编程题【Math类】计算类
  8. 【华为云技术分享】如何设计高质量软件-领域驱动设计DDD(Domain-Driven Design)学习心得
  9. Spring Boot(3)---Spring Boot入门:系统要求
  10. 如何禁用特定css_通过CSS追踪用户
  11. Netty学习总结(1)——Netty入门介绍
  12. 【转载】分层开发思想与小笼包
  13. K8S学习笔记之使用Fluent-bit将容器标准输入和输出的日志发送到Kafka
  14. NetBeans在Apache基金会取得的进展
  15. multism中ui和uo应该怎么表示_Multisim中节点如何标记
  16. 祝贺swm8023刷HDU-Steps登顶+突破新Section,14.2不是传说中的高级计算几何,而是数学~~...
  17. 2014十大的安全工具(ToolsWatch.org投票选出)
  18. 机器学习-吃瓜教程(西瓜书+南瓜书)-神经网络
  19. 并发编程:进程+线程+协程
  20. 架构系列---利用zookeeper 分布式锁解决缓存重建冲突实战

热门文章

  1. 从 IT 时代到 DT 时代的转型
  2. 爱前端邵山欢课程 node+angular+vue+react+webapp高级部分
  3. JavaCV音视频开发宝典:实现Base64编码图片转换成图片文件通用转换器,以base64转png图片文件为例,其他图片格式也全部支持
  4. pms输变电状态监测_输变电设备状态监测系统(国网电科院).pdf
  5. Cmder--windows 系统命令行神器
  6. 解决某些Android手机人民币符号¥只显示一横的方法
  7. (六一儿童节篇)渐行渐远的儿时游戏
  8. 汽车养护及美容【2】
  9. 23.深度解密二十三:自媒体影视视频剪辑号的运营思路及整体操作过程
  10. python3获取图片拍摄位置和时间