<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ww.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var classification_names = [["一年一班","一年二班"],["二年一班"],["三年一班"],["四年一班"]];
var classificaiton_ids = [[1,2],[3],[4],[5]];
function class_onchange(){
//删除前面所有分类
var classifications = document.getElementById("classifications");
classifications.options.length = 0;//清空前一次的选项
//获得所选班级id
var classid=document.getElementById("class").value;
//获得id班级所有分类名
var thisClassifcationNames=classification_names[classid];
if(!thisClassifcationNames){
return;
}
//获得id班级所有分类id
var thisClassifcationIds=classificaiton_ids[classid];
if(!thisClassifcationIds){
return;
}
//设置该班级分类选项
var nullOption = document.createElement("option");
nullOption.text="--请选择分类--";
nullOption.value="";
classifications.options.add(nullOption);
classifications.value="";
for(var i=0;i<thisClassifcationNames.length;i++){
var option = document.createElement("option");
option.text=thisClassifcationNames[i];
option.value=thisClassifcationIds[i];
classifications.options.add(option);
}
}
</script>
</head>
<body>
班级
<select id="class" name="class" onchange="return class_onchange()">
<option value="-1" selected="selected">
请选择年级
</option>
<option value="0">
一年级
</option>
<option value="1">
二年级
</option>
<option value="2">
三年级
</option>
<option value="3">
四年级
</option>
</select>
分类
<select id="classifications" name="classifications">
<option value="-1" selected="selected">
请选择班级
</option>
</select>
</body>
</html>
分享到：
相关推荐
**级联选择器（Cascader）在JavaScript中的应用** 级联选择器，通常被称为级联下拉框或树形下拉菜单，是一种常见的用户界面元素，尤其在数据层次结构复杂的情况下，它允许用户逐级浏览和选择数据。在JavaScript开发...
在JavaScript和jQuery的世界里，级联选择是一种常见的交互设计，...总之，"js 级联选择地区"是一种实用的前端交互设计，结合JavaScript和jQuery可以轻松实现。理解其工作原理和实现方法对于提升网页交互体验至关重要。
接下来，通过layui的JS接口初始化这个选择器，设置相应的配置项。例如： ```html <div id="cascadeDemo" class="layui-cascader"></div> ``` 在JavaScript中： ```javascript layui.use('form', function() { ...
在React.js开发中，"react级联选择器/支持多选/单选"是一个常见的组件需求，用于构建具有层级关系的数据选择功能。这种组件通常被用在如地区选择、组织结构选择等场景，用户可以逐级展开选项，进行单选或多选操作。...
JavaScript城市级联选择是一种常见的前端交互功能，常用于在线表单中，用户在选择省份后，下拉框会自动更新为对应省份的城市选项，以此类推到区县或街道。这种功能大大提升了用户体验，减少了手动输入的繁琐。下面将...
在"基于vue20实现的级联选择器"项目中，我们将会深入探讨如何使用 Vue.js v2.0 版本来构建一个功能丰富的级联选择器组件。这个组件能够支持单级、二级、三级乃至多级的级联效果，为用户提供了灵活的数据选择体验。 ...
在JavaScript（JS）中实现树型级联选择是一种常见的需求，尤其在构建用户界面时，如文件管理系统、组织架构展示或者导航菜单等。这个过程涉及到数据的递归处理、事件监听以及DOM操作。下面我们将详细探讨如何利用...
"JS 省份城市级联选择"就是这样一个解决方案，它利用JavaScript实现了一个高效的、无刷新的省份城市选择功能。这个功能对于提升用户体验至关重要，因为它减少了页面加载次数，提高了交互速度。 首先，我们来看...
总结一下，"ExtJS4.2 tree 级联选择"是通过ExtJS的TreePanel组件实现的，利用了`selModel`的级联选择功能，配合`check-tree.js`中的逻辑代码，读取`check-nodes.json`作为数据源，构建了一个具有交互式的树形选择器...
### JavaScript与ElementUI实现级联选择器 #### 一、引言 在现代Web开发中，用户界面的设计和交互逻辑的实现变得越来越重要。其中，级联选择器是一种常见的控件，广泛应用于需要多层级选择的场景，如省市县选择等...
总的来说，"JS仿人人网高校级联选择"是一个实用的前端示例，它展示了如何利用JavaScript和jQuery实现动态交互的级联选择功能。通过学习这个项目，开发者可以提升对前端交互设计和数据管理的理解，同时也可以借鉴其...
总的来说，这个实例展示了如何结合使用jQuery、JSP、JavaScript和CSS来实现一个功能完善的级联地区选择器，这在网页开发中非常实用，尤其是在需要用户输入地区信息的场景下。理解并掌握这种实现方式对于提升Web开发...
在"uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip"的压缩包中，应该包含了实现这些功能的示例代码，包括HTML结构、样式以及JavaScript逻辑。开发者可以通过查看和运行这些代码来学习如何在uni-...
Cascader.js是一款基于JavaScript的级联选择器组件，主要用于在Web应用中实现多级联动下拉菜单的效果。这种组件在数据层级关系较为复杂的场景中尤为常见，例如地区选择、产品分类、部门结构等。Cascader.js以其轻量...
总结，js和html编写的级联菜单结合了前端和后端的技术，通过JavaScript实现了动态交互和数据获取，HTML提供了结构基础，而数据库则为菜单提供了数据源。这种技术组合使得网页可以提供丰富的交互性和实时性，极大地...
纯JS级联下拉框，可以帮助拓展思路
在实际应用中，我们经常需要处理树形结构的复选框，实现级联选择功能，即当父节点被选中时，其所有子节点自动被选中，反之亦然。这篇博客“Ext TreePanelrcheckbox级联选择的实现”就专注于探讨这个主题。 首先，...
`bootstrap-treeview-util.js`则是实现级联选择的核心代码。在Bootstrap的Tree View基础上，开发者可能扩展了Tree View的默认行为，添加了级联选择的逻辑。这可能包括监听用户的点击事件，维护一个当前选中节点的...
接下来，可以通过JavaScript代码实例化选择器，并配置所需的参数，如日期格式、级联数据等。最后，将选择器绑定到HTML元素上，即可在页面上看到效果。同时，阅读库的文档将有助于理解其具体用法和API，以便更好地...