`
younglibin
  • 浏览: 1214090 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js三级联动

    博客分类:
  • js
阅读更多
<html>
<head>
<title>级联菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">


<script language="JavaScript">

function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined")
{
return false;
}
return true;
}

function change(v)
{
var str="0";
for(i=0;i<v;i++)
{
str+=("_"+(document.getElementById(s[i]).selectedIndex-1));
};
var ss=document.getElementById(s[v]);
with(ss)
{
  length = 0;
  options[0]=new Option(opt0[v],opt0[v]);
  if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
  {
   if(dsy.Exists(str))
   {
    ar = dsy.Items[str];
    for(i=0;i<ar.length;i++)
    {
    options[length]=new Option(ar[i],ar[i]);
    }
    if(v)options[1].selected = true;
   }
  }
  if(++v<s.length)
  {
  change(v);
  }
}
}

var dsy = new Dsy();

dsy.add("0",["总办","财政部","技术部"]);

dsy.add("0_0",["技术总办","销售总办","人事总办"]);

dsy.add("0_0_0",["1"]);
dsy.add("0_0_1",["2"]);
dsy.add("0_0_2",["3"]);


dsy.add("0_1",["财政一","财政二","财政三"]);

dsy.add("0_1_0",["1"]);
dsy.add("0_1_1",["1","2"]);
dsy.add("0_1_2",["1","2"]);



dsy.add("0_2",["eoms","sp","网管综合","技术支撑"]);

dsy.add("0_2_0",["1","2","3"]);
dsy.add("0_2_1",["1","3","2"]);
dsy.add("0_2_2",["1","3","2"]);
dsy.add("0_2_3",["1","3","2"]);


</script>

<script language = JavaScript>

var s=["s1","s2","s3"];
var opt0 = ["部门","组","人员"];
function setup()
{
for(i=0;i<s.length-1;i++)
  document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
change(0);
}

</script>

</head>
<body onLoad="setup()" >
<form name="frm">
<select id="s1">

</select>
<select id="s2">

</select>
<select id="s3">

</select>
</form>
</body>
</html> 
分享到:
评论

相关推荐

    Javascript三级联动

    在这个"JavaScript三级联动"的示例中,我们主要探讨的是如何通过JavaScript实现省、市、区的选择联动。 首先,我们需要理解三级联动的基本原理。在HTML中,我们可以创建一系列下拉菜单(`&lt;select&gt;`元素),分别代表...

    js三级联动经典实例值得一看

    用javaScript 实现三级联动 经典实例 js javaScript 三级联动 js javaScript 三级联动 js javaScript 三级联动

    世界主要国家地区的JS三级联动(包括国内的省市区三级联动)

    总结来说,实现世界主要国家地区的JS三级联动及下拉框的隐藏显示功能,需要对JavaScript的DOM操作、事件监听以及CSS样式有深入理解。通过合理组织数据和动态更新DOM,可以构建出高效、灵活的用户界面。在实际项目中...

    JS三级联动代码

    在JavaScript(JS)编程中,三级联动是一种常见的交互设计,常用于实现下拉菜单的联动效果,例如在选择国家、省份和城市时。这个场景在网页表单中尤为常见,可以提升用户在填写信息时的体验。在这个"JS三级联动代码...

    Ajax JavaWeb JS 三级联动

    在Web开发中,"Ajax JavaWeb JS 三级联动"是一个常见的功能需求,它涉及到前端JavaScript技术、后端JavaWeb服务以及Ajax异步通信。这个功能主要用于创建交互性强的下拉菜单,通常用于地区选择、商品分类等场景,用户...

    JS三级联动菜单---世界主要国家地区.pdf

    JS三级联动菜单---世界主要国家地区 本篇文章主要介绍了使用JavaScript实现三级联动菜单,涵盖了世界主要国家和地区。下面将对标题、描述、标签和部分内容中的知识点进行详细的解释和说明。 首先, lets talks ...

    html+js三级联动源码

    这个"html+js三级联动源码"提供了一个实现这一功能的实例。下面将详细介绍这个概念及其工作原理。 首先,三级联动指的是在三个层级之间建立联动关系,当用户在某一层级选择一个选项时,下一层级的选项会根据前一层...

    世界主要国家地区JS三级联动菜单

    通过学习和实践这个“世界主要国家地区JS三级联动菜单”,你可以提升在前端开发中的动态交互设计能力,更好地理解和掌握JavaScript在实际项目中的应用。这个资源不仅可以帮助你实现一个功能完备的菜单系统,同时也是...

    js三级联动下拉框

    ### JS三级联动下拉框知识点解析 #### 一、知识点概览 在Web开发中,三级联动下拉框是一种常见的用户交互方式,主要用于提供多级数据选择的功能,比如省份、城市、区县的选择等场景。该功能通过JavaScript实现,...

    js三级联动下拉选择菜单代码

    在前端开发中,"js三级联动...总结,实现js三级联动下拉选择菜单涉及JavaScript基础,DOM操作,事件监听,以及可能的异步数据加载。开发者需要理解这些基本概念并能灵活运用,才能创建出高效且用户友好的前端交互功能。

    js 三级联动

    ### js三级联动插件解析与应用 在网页开发中,我们常常遇到需要用户选择省、市、区等多级选项的场景,例如在填写地址信息时。为了提供更好的用户体验,前端开发者通常会采用“三级联动”功能,即当用户选择一个选项...

    下拉列表 js三级联动

    在网页开发中,"下拉列表 js三级联动"是一个常见的交互设计,主要用于创建多级关联的选择效果,例如在地区选择中,用户先选择国家,接着是省份,最后是城市。这种设计可以为用户提供清晰的导航,并减少输入错误。在...

    JS三级联动菜单---世界主要国家地区

    通过以上分析,我们可以看出,JS三级联动菜单是通过精心设计的数据结构和有效的JavaScript逻辑来实现的。它不仅提高了用户界面的交互性和可用性,也为处理多层次数据提供了高效的方法。在实际开发中,掌握并灵活运用...

    JS三级联动不间断滚动

    在本主题"JS三级联动不间断滚动"中,我们将探讨如何使用JavaScript实现多级菜单之间的联动以及持续滚动的效果。 首先,我们需要理解“三级联动”的概念。在网页设计中,联动通常是指当用户在一个下拉菜单或选项中...

Global site tag (gtag.js) - Google Analytics