`

DropDownList三级联动

    博客分类:
  • Ajax
阅读更多
<script type="text/javascript">
			window.onload = function()
			{
			    branchOne = document.getElementById("<%=ddlBranchOne.ClientID %>");
			    branchTwo = document.getElementById("<%=ddlBranchTwo.ClientID %>");
			    branchThree = document.getElementById("<%=ddlBranchThree.ClientID %>");
			    //加载一级机构信息
				loadBranchOne();
			}
			var loadBranchOne = function()
			{
			    //请求URL
			    reqUrl = "/TheOneHRWeb/handler/GetBranchOne.aspx?ocaID=" + new Date().getTime();
			    //回调函数
			    var fnCallBack = function(oResult)
			    {
			        //将Json格式的字符串转换为JS对象
			        var result = eval(oResult);
			        //读取数据
			        exportDropDownList(branchOne, result);
			        branchOne.onchange = function()
			        {
			            if(branchOne.value != "-1")
			            {
			                //加载二级机构信息
			                loadBranchTwo(branchOne.value);
			            }
			            //选中项为"请选择"
			            else
			            {
			                //清空二级机构下拉菜单
			                clearDropDownList(branchTwo);
			                //添加一项"请选择"
			               branchTwo.options.add(new Option("请选择", "-1"));
			              //清空三级机构下拉菜单
			              clearDropDownList(branchThree); 
			              branchThree.options.add(new Option("请选择", "-1"));
			            }     
			        }
			    }
			    oHttp.Get(reqUrl, fnCallBack, null);
			}
			
			var loadBranchTwo = function(branchId)
			{
			    //请求的URL
			    var reqUrl = "/TheOneHRWeb/handler/GetBranchTwo.aspx?ocaID=" + new Date().getTime() +"&branchID="+branchId;
			    //回调函数
			    var fnCallBack = function(oRequest)
			    {
			        //将Json格式的字符串转换为JS对象
			        var result = eval(oRequest);
			        exportDropDownList(branchTwo, result);
			        branchTwo.onchange = function()
			        {
			            if(branchTwo.value != "-1")
			            {
			                loadBranchThree(branchTwo.value);
			            }
			            else
			            {
			               //清空三级机构下拉菜单
			              clearDropDownList(branchThree); 
			              branchThree.options.add(new Option("请选择", "-1"));
			            }
			        }
			    }
			    //alert(reqUrl);
			    oHttp.Get(reqUrl, fnCallBack, null);
			}
			
			var loadBranchThree = function(branchId)
			{
			    //请求的URL
			    var reqUrl = "/TheOneHRWeb/handler/GetBranchThird.aspx?ocaID=" + new Date().getTime() +"&branchID=" + branchId;
			    //回调函数
			    var fnCallBack = function(oResult)
			    {
			        var result = eval(oResult);
			        exportDropDownList(branchThree, result);
			    }
			    oHttp.Get(reqUrl, fnCallBack, null);
			}
			
			//导入下拉菜单数据
			function exportDropDownList(ddl, oResult)
			{
			    //清空select
			    clearDropDownList(ddl);
			    //创建一个option对象
			    var oOption = document.createElement("option");
			    //创建一项"请选择"
		        var oSelect = document.createTextNode("请选择");
		        //给select添加value值
		        oOption.setAttribute("value", "-1");
			    oOption.appendChild(oSelect);
			    ddl.appendChild(oOption);
			    //遍历Json数据,添加每项
			    for(var i = 0; i < oResult.length; i++)
			    {
			        //文本
			        var brName = oResult[i].branchName;
			        //值
			        var brID = oResult[i].branchID;
			        var brOption = document.createElement("option");
			        brOption.setAttribute("value", brID);
			        brOption.appendChild(document.createTextNode(brName));
			        ddl.appendChild(brOption);
			    }
			}
			
			//清空下拉菜单(select)
			function clearDropDownList(ddl)
			{
			    for(var i = ddl.options.length - 1; i>=0; i--)
			    {
			        ddl.remove(i);
			    }
			}
</script>
分享到:
评论

相关推荐

    dropdownlist 三级联动

    在网页开发中,"dropdownlist 三级联动"是一种常见的交互设计,主要用于实现多个下拉列表之间的联动效果。这种设计常用于地区选择、类别筛选等场景,用户在一级下拉框中选择一个选项后,二级下拉框会动态更新其可选...

    dropdownlist三级联动效果

    ### DropdownList三级联动效果知识点详解 #### 一、概述 在网页开发中,DropdownList(下拉列表)是一种常见的交互元素,被广泛应用于各种表单和数据筛选场景中。而“三级联动”的DropdownList则是指当用户选择第一...

    dropdownlist三级联动数据库

    在网页开发中,"dropdownlist三级联动数据库"是一种常见的交互设计,用于实现用户在选择一个选项后,下级的下拉列表自动更新以显示与所选选项相关的子选项。这种功能通常应用于地区选择(如中国省份城市区)、产品...

    javascript dropdownlist 三级联动的资料

    在网页开发中,JavaScript下拉菜单的三级联动是一种常见的交互设计,主要用于实现多级关联的选择效果,例如在省、市、区的选择中。这个技术基于JavaScript的DOM操作和事件监听,能够动态更新下拉列表,根据用户在前...

    asp.net DropDownList 三级联动下拉菜单实现代码

    在*** Web Forms应用中,实现一个三级联动的DropDownList下拉菜单,可以提高用户界面的交互性和用户体验。三级联动下拉菜单通常是指当用户从第一个下拉菜单选择一个选项时,第二个下拉菜单会根据第一个选项的值更新...

    DropDownList 3级联动

    DropDownList 3级联动是一种常见的前端交互设计,广泛应用于网页表单中,特别是在需要用户从多个相关选项中选择的情况下。这种联动效果使得用户能够逐步细化他们的选择,例如在选择地理位置时,先选国家,再选省份,...

    DropDownList无刷新三级联动

    DropDownList无刷新三级联动 caomianpublic void getDdlInfo(DropDownList province,DropDownList city,DropDownList town,Page myPage) { //初始化省 string sql="select 序号,省名 from 省表"; SqlCommand ...

    用DropDownList控件绑定XML数据实现省市区三级联动

    在ASP.NET开发中,我们经常需要处理用户界面中的选择交互,比如实现省市区三级联动的效果。这通常用于地址填写或配送区域的选择等场景。本文将详细介绍如何利用DropDownList控件结合XML数据源来实现这一功能。 首先...

    C#中国地区三级联动下拉菜单

    标题 "C#中国地区三级联动下拉菜单" 描述了一个常见的网页开发问题,即在C# ASP.NET项目中实现中国地区的三级联动下拉菜单时遇到的编码问题。开发者通常会从网上找到JavaScript代码来实现这一功能,但在将.js文件...

    .Net 中 DropDownList 绑定XML 数据 中国省市县下拉菜单三级联动 成功版

    本示例中,我们探讨的是如何利用.NET框架结合XML数据来实现中国省市县的三级联动效果,即当用户在DropDownList中选择一个省时,市的下拉列表会自动更新,接着选择市后,县的下拉列表也会动态加载对应的数据。...

    ASP.NET 省 城市 县区三级联动

    ASP.NET 省城市县区三级联动是一种常见的前端交互功能,尤其在填写地址或选择地域信息时非常常见。这个功能的实现主要是通过三个下拉列表(DropdownList)进行层级关联,用户在选择一个省份后,相应的城市列表会自动...

    基于xml数据的省市区三级联动

    在网页开发中,省市区三级联动是一种常见的交互设计,它允许用户通过选择省份来自动更新市、区的下拉选项,提高用户填写地址的效率。本主题“基于xml数据的省市区三级联动”关注的是如何利用JavaScript和XML数据来...

    dropdownlist 省市二级联动

    在网页开发中,"dropdownlist 省市二级联动"是一种常见的交互设计,主要用于实现用户在选择省份时,下方的下拉列表会自动更新为对应省份的城市,无需页面整体刷新。这种功能通常应用于地址填写、订单提交等场景,...

    Asp.net三级联动

    在Asp.net开发中,"三级联动"是一种常见的交互设计技术,主要应用于下拉菜单或者选择框中,常用于地区选择、分类导航等场景。它指的是三个或更多级的控件之间存在联动关系,当用户在一级控件中选择一个选项时,二级...

    .asp三级联动

    在这个特定的场景中,".asp三级联动"指的是在ASP.NET中实现的一种交互式功能,通常用于下拉列表的选择,用户在选择一级选项后,二级和三级选项会根据一级的选择动态加载相关数据,这种设计常见于地址选择或者分类...

    DropDownList省市区Ajax无刷新三级联动 带最新省市区数据库脚本.zip

    在IT开发领域,尤其是Web应用开发中,"DropDownList省市区Ajax无刷新三级联动"是一种常见的功能需求。这个标题所代表的知识点主要涉及到ASP.NET、C#编程语言、AJAX技术以及数据库操作,特别是如何实现多级联动下拉...

    .net三级联动

    .net C# 三级联动 dropdownlist的应用,选择上级,下级随之搜定相应的数据。

    ASP.Net 省市县三级联动

    ASP.NET 省市县三级联动是一种常见的Web开发技术,它主要用于构建地理信息选择功能,例如在注册、地址填写等场景中。在这个系统中,用户首先选择省份,然后根据已选择的省份加载对应的市,接着再根据选定的市加载...

Global site tag (gtag.js) - Google Analytics