三层关联下拉列表的编程思路:
来源:(http://blog.sina.com.cn/s/blog_4f9ce8f30100ip1u.html) - JAVA软件工程师--关联下拉列表(JavaScript)_徐亮Bright_新浪博客
本例子是两次关联,对于三层的,情况类似。如要降低编程难度,可以考虑用onblur="f()"和加if-else判断解决。当用户选择了第二层的选项离开后,调用f()函数。该函数通过var obj3=document.getElementById(); var index=obj3.options.selectedIndex得到选择的下标index.这样分解后,就变为二层关联问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>relatedSelect.html</title>
<style>
#dhead {
font-size: 20;
background-color: red;
color: green;
width: 400;
height: 300;
}
#dfirst {
background-color: blue;
width: 400;
height: 70;
}
#dsecond {
background-color: yellow;
width: 400;
height: 240;
}
</style>
<script>
var arr=new Array();
arr[0]=[new Option("--方向--","-1")];
arr[1]=[new Option("图形计算","10"),new Option("科学计算","11"),new Option("软件工程","12")];
arr[2]=[new Option("商务英语","20"),new Option("对外英语","21")];
function cc(index){
alert(index);
var obj2=document.getElementById('s2');
var len=arr[index].length;
alert("len:"+len);
obj2.options.length=len;
alert(obj2.options.length);
for(var i=0;i<len;i++){
obj2.options[i]=arr[index][i];
alert(obj2.options[i]);
}
}
</script>
</head>
<body>
<div id="head">
<div id="dfirst" style="font-size:30px">关联下拉列表</div>
<div id="dsecond">
<form>
<select name="major" id="s1" onchange="cc(this.selectedIndex);">
<option value="major">--专业--</option>
<option value="computer">计算机</option>
<option value="english">英语 </option>
</select>
<select name="direction" id="s2">
<option value="-1">--方向--</option>
</select>
</form>
</div>
</div>
</body>
</html>
分享到:
相关推荐
在本文中,我们将探讨检查系统上安装的 Python 版本的各种方法。无论您是开始 Python 之旅的初学者还是从事项目的经验丰富的开发人员,了解您的 Python 版本是确保顺利执行和兼容性的第一步。我们将深入研究命令行...
这是基于Tim分层列表。 Reddit:CS_TimaeuSS不和谐:TimaeuSS#0425该列表的所有积分都归他所有。 他的层级列表: ://docs.google....
皮纳斯 这个 gem 提供了菲律宾位置的分层列表。安装将此行添加到应用程序的 Gemfile 中: gem 'pinas'然后执行: $ bundle或者自己安装: $ gem install pinas设置 $ rails g pinas:install$ rake db:migrate$ rake ...
Yana Nestable 是一个带有拖放功能的 WUI 分层列表创建器。您可以轻松地在您的项目中使用此应用程序的源代码并玩得开心! 创建菜单、类别和...从未如此简单……每个可嵌套的项目都可以使用此模块创建并存储在数据库...
Treeview控件TreeView控件显示Node对象的分层列表,每个Node对象均由一个标签和一个可选的位图组成。TreeView 一般用于显示文档标题、索引入口、磁盘上的文件和目录、或能被有效地分层显示的其它种类信息。创建了...
TreeView控件使用,可以动态进行树图控制。
asp.nettreeview的具体用法.里面有很详细的用法和注释.大家下载试试看吧.
TreeView控件显示Node对象的分层列表,每个Node对象均由一个标签和一个可选的位图组成。TreeView 一般用于显示文档标题、索引入口、磁盘上的文件和目录、或能被有效地分层显示的其它种类信息。创建了TreeView控件...
目录演示版安装npm install -save react-nestable用法import Nestable from 'react-nestable';每个项目都必须具有唯一的id以区分元素const items = [ { id: 0, text: 'Andy' }, { id: 1, text: 'Harry', children: ...
开发人员不需要模型/视图框架的灵活性可以使用这个类来创建简单的分层列表。更灵活的方法是结合QTreeView标准项目模型。这允许存储的数据是与它的表示分离。 在其最简单的形式,一个tree小部件可以构建在以下方式
TreeView控件显示Node对象的分层列表,每个Node对象均由一个标签和一个可选的位图组成。TreeView 一般用于显示文档标题、索引入口、磁盘上的文件和目录、或能被有效地分层显示的其它种类信息。创建了TreeView控件...
第5章至第16章深入介绍如何开发各种高级iPhone特性,其中包括自动旋转、工具栏控制器、表视图、分层列表、应用程序设置、数据管理、绘图、手势输入、Core Location、加速计以及照相机和相片库。最后两章介绍如何将...
ext 扩展子列表头 ,列表头分层 ,例子分了三层 ,打开 ANSTS01 即可
vue-nestable拖放为vue组件的分层列表。 目标一个简单的vue组件,用于创建可自定义项目的可拖动列表,通过将项目拖到另一个项目上方来重新排序项目,通过向右拖动来直观地嵌套项目完全可自定义,不包含CSS。所有内容...
前端项目-nestable2,拖放具有鼠标和触摸兼容性的分层列表
sklearn中,提供了统一的非分层列表。 案例研究:关于传感器惯性测量的论文: 这是我们正在发表的论文中发现的问题的一个示例: 算法:zhu,yun,young,pep,peps 变体: 年轻:纯净或完美 Peppoloni:原始或svd或...
TreeView 控件显示 Node 对象的分层列表,每个 Node 对象均由一个标签和一个可选的位图组成。TreeView 一般用于显示文档标题、索引入口、磁盘上的文件和目录、或能被有效地分层显示的其它种类信息。 语法
您可以使用最少的输入来创建分层列表,定义列表和表格。您也可以粘贴源代码并在一个步骤中对其进行美化。 另外,专门编辑Extreme Markup的编辑器与Blogger的功能很好地协作。您可以使用所有按钮,如粗体,添加链接或...
使用Jquery实现 页面有新消息即时弹出框提醒,包括分层列表、表单验证、带拖动测层、等...