`
rainlife
  • 浏览: 233320 次
  • 性别: Icon_minigender_1
  • 来自: 我也来自火星?
社区版块
存档分类
最新评论

Javascript写的级联选择框

阅读更多
<head>
<title></title>
<script  type="text/javascript">...
    var classification_names = [["一年一班","一年二班"],["二年一班"],["三年一班"],["四年一班"]];
    var classificaiton_ids = [[1,2],[3],[4],[5]];
    
    function class_onchange() ...{
        //删除前面所有分类
        var classifications = document.getElementById("classifications");
        var count=classifications.options.length;
        var delCount = 0 ;
        while(delCount < count)    ...{            
            classifications.options.remove(i);
            delCount++;
        } 
        //获得所选班级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>
分享到:
评论

相关推荐

    javaScript城市级联选择

    JavaScript城市级联选择是一种常见的前端交互功能,常用于在线表单中,用户在选择省份后,下拉框会自动更新为对应省份的城市选项,以此类推到区县或街道。这种功能大大提升了用户体验,减少了手动输入的繁琐。下面将...

    ajax sturts2级联选择框

    你可以使用插件提供的标签库来创建级联选择框,而无需手动编写大量的JavaScript代码。 6. **JSP页面**:在JSP页面上,你需要创建HTML选择框,并使用JavaScript或Struts2-jQuery插件的标签来实现级联效果。确保每个...

    JavaScript动态级联下拉列表框

    JavaScript动态级联下拉列表框是一种常见的前端交互设计,它允许用户在选择一个选项后,根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用,能够提高用户体验,减少不必...

    cascaderjs级联选择器

    **级联选择器(Cascader)在JavaScript中的应用** 级联选择器,通常被称为级联下拉框或树形下拉菜单,是一种常见的用户界面元素,尤其在数据层次结构复杂的情况下,它允许用户逐级浏览和选择数据。在JavaScript开发...

    react级联选择器/支持多选/单选

    在React.js开发中,"react级联选择器/支持多选/单选"是一个常见的组件需求,用于构建具有层级关系的数据选择功能。这种组件通常被用在如地区选择、组织结构选择等场景,用户可以逐级展开选项,进行单选或多选操作。...

    layui多选级联选择器

    在layui中,级联选择器是一种常用于数据层级关系展示和选择的组件,尤其适用于地区选择、部门结构等场景。本篇文章将深入探讨layui的多选级联选择器及其无限级联功能。 首先,我们要理解什么是级联选择器。级联选择...

    Ajax级联选择框:以中国的省市地区三级联动选择为例

    本示例以中国的省市地区三级联动选择为例,讲解如何实现一个Ajax级联选择框。这样的功能常见于网站注册、地址填写等场景,用户在选择省份后,城市和区县会根据所选省份动态加载,提供流畅的用户体验。 首先,我们来...

    easyui级联选择

    通过服务器后台传来的json数据,进行前台组织或人员的选择

    ExtJS4.2 tree 级联选择

    例如,我们可以使用`TreeSelectionModel`,并启用`checkboxes`属性来显示复选框,并通过`cascadeChanges`属性来实现级联选择。代码可能涉及到以下关键部分: 1. 创建TreePanel,并配置`selModel`: ```javascript ...

    基于vue20实现的级联选择器

    在"基于vue20实现的级联选择器"项目中,我们将会深入探讨如何使用 Vue.js v2.0 版本来构建一个功能丰富的级联选择器组件。这个组件能够支持单级、二级、三级乃至多级的级联效果,为用户提供了灵活的数据选择体验。 ...

    AngularJS实现三级级联下拉选择框

    在本文中,我们将深入探讨如何使用AngularJS实现三级级联下拉选择框。AngularJS,一个由Google维护的JavaScript框架,被广泛用于构建单页应用(SPA),它提供了丰富的功能来处理复杂的前端交互,包括数据绑定、依赖...

    JS仿人人网高校级联选择

    总的来说,"JS仿人人网高校级联选择"是一个实用的前端示例,它展示了如何利用JavaScript和jQuery实现动态交互的级联选择功能。通过学习这个项目,开发者可以提升对前端交互设计和数据管理的理解,同时也可以借鉴其...

    JS 省份城市级联选择

    "JS 省份城市级联选择"就是这样一个解决方案,它利用JavaScript实现了一个高效的、无刷新的省份城市选择功能。这个功能对于提升用户体验至关重要,因为它减少了页面加载次数,提高了交互速度。 首先,我们来看...

    修正版 layui单选级联(省市区选择地区)选择器的实现

    "ext"文件可能是扩展或额外的资源文件,如CSS样式表或JavaScript脚本,它们可能包含了layui框架的样式和函数,用于实现级联选择器的功能。CSS文件用于美化界面,提供视觉上的吸引力;而JavaScript文件则负责处理交互...

    uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

    在"uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip"这个压缩包中,包含了实现这种级联选择的示例代码。 uni-app是一个多端统一的开发框架,它可以将同一份代码编译到iOS、Android、H5、小程序等...

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    级联选择器(Cascading Selectors)则是一种允许用户从一系列相关选项中逐级选择的控件。例如,在一个国家/地区选择器之后,可能会有一个相应的城市选择器,城市列表根据之前选择的国家动态加载。级联选择器提高了...

    仿人人注册高校/大学级联选择JS代码

    - "School.html":这是HTML文件,包含了网页的结构和元素,包括级联选择框的HTML代码,以及可能的JavaScript引用和事件绑定。 - "school.js":这个JavaScript文件是整个功能的核心,它包含了处理级联选择逻辑的代码...

    jQuery实现级联地区选择

    在网页开发中,级联选择是一种常见的交互设计,特别是在处理地理区域信息时,如省份、城市的选择。"jQuery实现级联地区选择"这个主题就是关于如何利用jQuery库来创建一个动态联动的省份-城市选择器。这个实例包含了...

    Ext TreePanelrcheckbox级联选择的实现

    在实际应用中,我们经常需要处理树形结构的复选框,实现级联选择功能,即当父节点被选中时,其所有子节点自动被选中,反之亦然。这篇博客“Ext TreePanelrcheckbox级联选择的实现”就专注于探讨这个主题。 首先,...

Global site tag (gtag.js) - Google Analytics