前言：

要实现下拉列表的无刷联动，之前一直认为主要涉及到JS中的Ajax问题，然而其中仍然有很多问题，在具体操作实现过程时才逐步将其解决。呵呵~

如上图示，我们实现了部门—岗位的联动。

具体情境如下：数据库中有表Dept：部门表、User：员工表、Leadership：部门-岗位表。其中我们假设Leadership的记录如下：

为简便，没有采取在后台读取数据库，而是模拟情况，实现图示的无刷联动效果。

 问题展现：

在实现过程中主要问题有三点：

1.如何用Ajax将数据库中数据，以何种方式返回（用ResponseText属性）；

2.如何将返回数据解析，读入对应DropDownList中，实现Text和Value的填充；

3.如何读取联动的下拉列表框的值（这点完全不了解情况，在之前）；

初步答案是：用字符串的方式传输，并解析为字符串数组，再在后台以Response.Form["DropDownList2"]读取对应下拉列表框的值。

先看后台代码：

<head id="Head1" runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    //Description: 通过代码，演示无刷联动下拉列表框的实现方式

//CopyRight: http://www.cnblogs.com/yangmingming

//Notes: 为简便，采用最简便的示例
       //声明XmlHttpRequest变量
        var xmlHttp;

// 声明用户名是否存在的变量
        var existUser = 0;
      
        function getHeadship(deptCode)
        {
            //二级连动
            var xmlHttpDwl = GetHttpObject();
            if (xmlHttpDwl == null) {
                alert("您的浏览器已过时");
                return;
            }
            xmlHttpDwl.onreadystatechange = function() {
                if (xmlHttpDwl.readyState == 4) {
                    var arr = new Array(100);
                    arr = xmlHttpDwl.responseText.split("|");
                    alert (arr[4]);
                    document.getElementById("DropDownList2").length = 0;
                    var count=0;
                    for (var i = 0, j = 0; i < arr.length - 1; i = i + 2, j++) {
                       
                        var opt=document .createElement ("Option");
                        opt.text=arr[i];
                        opt.value=arr[i+1];
                        document.getElementById("DropDownList2").options.add(opt);
                      //  document.getElementById("DropDownList2").options[j].selected=true ;
   
                    }
                }
            }
            xmlHttpDwl.open("GET", "GetDropDownList.aspx?deptCode=" + deptCode , true);
            xmlHttpDwl.send(null);
        }
        
        //获得XmlHttpRequest对象xmlHttp
        function GetHttpObject() 
        {
            var xmlHttp = null;
            try {
            //FireFox,Opera等浏览器
                xmlHttp = new XMLHttpRequest();
            }
            catch (e) 
            {
                try {
                    xmlHttp = new ActiveXObject("Msxml12.XMLHTTP");
                }
                catch (e) 
                {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               }
           }
           return xmlHttp;
       }
 
    </script>
</head>
<body>
    <form id="form1" runat="server" >
    <div>
        部门：<asp:DropDownList ID="DropDownList1" runat="server" onchange="getHeadship(this.value)">
            <asp:ListItem>总经办</asp:ListItem>
            <asp:ListItem>项目部</asp:ListItem>
            <asp:ListItem>财务部</asp:ListItem>
            
            <asp:ListItem Selected="True" Value="0">请选择部门</asp:ListItem>
            
        </asp:DropDownList>岗位：
        <asp:DropDownList ID="DropDownList2" runat="server" >
           
        </asp:DropDownList><br />
       
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交"   />
        <br />
        
    </div>
    </form>
</body>
</html>

其对应的图示即为图1所示。同时作为Ajax辅助，我们单独提供一个提供返回值的GetDropDownList.aspx页面，其后台代码如下：

代码

//Description: 通过代码，模拟读取数据库获取值的情形

//CopyRight: http://www.cnblogs.com/yangmingming

//Notes: 为简便，采用最简便的示例，演示读取数据库情形

public partial class GetDropDownList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // if (Request["deptCode"].ToString().Trim () != "0")
            {
                string strWhere = Request["deptCode"].ToString();
                string strDropList = string.Empty;
                if (strWhere != "0")
                {
                    if (strWhere == "总经办")
                        strDropList = "总经理|1|总经理助理|2|";
                    else if (strWhere == "项目部")
                        strDropList = "项目部长|3|开发组长|4|程序员|5|";
                    else if (strWhere == "财务部")
                        strDropList = "财务部长|6|会计|7|";
                }
                Response.Write(strDropList);
            }
        }
    }

在默认页面的后台代码为：

代码

//Description: 通过代码，展现获取对应下拉列表框值的方式

//CopyRight: http://www.cnblogs.com/yangmingming

//Notes: 为简便，只模拟一按钮提交情形

public partial class _Default : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }

protected void Button1_Click(object sender, EventArgs e)
        {
            //入库操作
            string dropDownList1 = DropDownList1.SelectedValue.ToString();
            string dropDownList2 = Request.Form["DropDownList2"].ToString();
            int i = 0;
        }

}

即通过以上准备，即实现了下拉列表的无刷联动，又在按钮事件的函数中，对其值进行了读取。

涉及点分析：

1.在其中Ajax中，其实现方式固定，在此仅使用并回顾一下；

2.对于级联的下拉列表框，其填充方式，应该有2种方式，一种如上示，另一种new Option（Text，value），我一直没有实现value的填充，不知为何？然而这种方式很容易的实现了，呵呵~；

3.当单步调试，发现已经实现了级联下拉列表框的填充（包括text，和value），然而却在后台取不出。？经过CSDN相关解释，认为： 在js实现的option填充，即使是服务器控件，依然无法取出其值，只有采用：Request.Form["DropDownList2"].ToString()  方式提出；

综述之，如上就实现了一直常见的、但一直没有彻底解决的二级联动无刷 、三级联动无刷等实现，呵呵~

转载于:https://www.cnblogs.com/yangmingming/archive/2010/03/09/1681199.html

利用JS+Ajax实现下拉列表无刷联动，及其相关相关推荐

  1. 利用js实现table的无刷新静态内容过滤

     最近,一直在学习前端方面的知识,看到网上有一些页面的table能够实现静态内容筛选,觉得这个东西有点意思,由于初学js就想试试. 我看了一些网上有关的案例http://www.freejs.ne ...

  2. 利用Ajax实现DataGrid无刷新分页(AjaxGrid)【转】

    利用Ajax实现DataGrid无刷新分页(AjaxGrid) DataGrid功能强大,我们只用写几行代码就能够实现复杂的页面数据显示.数据多的时候免不了要分页显示,DataGrdi本身自带分页功能 ...

  3. 利用js的数组制作二级联动

    利用js的数组制作二级联动 前面的博客我们讲解js的数组及相关属性和方法,今天我们来说一下如何利用js的数组制作二级联动效果.当然,说到二级联动,跳不过的就是多维数组. 1.多维数组 // 多维数组: ...

  4. html中免费的四级联动,利用JS实现省市区街道四级联动插件

    特效描述:利用JS实现 省市区街道 四级联动插件.利用JS实现省市区街道四级联动插件 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 所在地区 所在地区 请选择 请选择 请选择 请选择 ...

  5. jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动

    本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...

  6. 利用pushState开发无刷页面切换

    相关文档:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulatingthebrowser_history 实现目标 ...

  7. html用ajax做三级联动,怎样使用JS+AJAX做出三级联动

    这次给大家带来怎样使用JS+AJAX做出三级联动,使用JS+AJAX做出三级联动的注意事项有哪些,下面就是实战案例,一起来看一下. js 三级联动的实现代码如下所示: js原生ajax -请选择 省/ ...

  8. 用ajax(vb.net) 实现dropdownlist二级无刷新联动~！

    说说vb.net ajaxpro 实现dropdownlist二级无刷新联动~! Code <div class="div_RSL">  <asp:DropDow ...

  9. js ajax上传文件到服务器,使用ajax上传并预览图片后传到服务器上

    利用js的FormData对象快速收集表单信息及无刷新上传头像 #preview, .img, img { width: 200px; height: 200px; } #preview { bord ...

最新文章

  1. 因为此版本的应用程序不支持其项目类型（.vcproj）的解决方法
  2. PHP案例 网页计数器设计
  3. oracle 查询时间跨度一年,关于时间跨度比较的OVERLAPS函数
  4. QString 与中文问题
  5. JS成员函数声明位置优化
  6. 基于模型协同过滤推荐离线召回：ALS
  7. 杭电计算机组成实验2（二）超前进位加法器设计实验
  8. 【Spring】Spring boot 可以通过集成jolokia来使用HTTP形式访问mbean
  9. 3D移动translate3d（CSS3）
  10. 在Fedora8上配置Apache Httpd
  11. 详解C++ friend关键字
  12. 提取一个文件中的相同的文件类型
  13. 深度Team Building
  14. gwas snp 和_2型糖尿病GWAS关联SNP对miRNA-mRNA互作的影响分析
  15. win10系统安装CH340驱动
  16. 官方文件出炉！北京住建委权威解读商住限购
  17. 项目生命周期、开发生命周期与产品生命周期的区别
  18. AutoCAD Civil 3D-曲面-1、曲面创建
  19. Amazon亚马逊开发者账号申请
  20. Shell脚本实现sshd黑名单

热门文章

  1. ListView vs FlatList vs RecyclerListView性能对比
  2. ES6——函数的name属性
  3. 零基础快速开发全栈后台管理系统（Vue3+ElementPlus+Koa2）—项目概述篇（一）
  4. python pandas series_Python数据分析-pandas之Series
  5. pip下载安装与环境配置
  6. 信用卡逾期了还能网上贷款吗？
  7. 发际线对于一个人的颜值影响有多大？
  8. 山东省德州市有哪些明星？
  9. 多么痛的领悟！差不多2015年的时候，我开始关注股票
  10. 相信很多人心里都有着一个自媒体的梦想