`
stargate
  • 浏览: 5960 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

一个简单的下拉级联

阅读更多

<form name="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
<option selected>请选择</option>
<option value="1">脚本语言</option>
<option value="2">高级语言</option>
<option value="3">其他语言</option>
</select>


<select name="s2">
<option value="请选择" selected>请选择</option>
</select>
</form>


<script language="javascript">
//获取一级菜单长度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);

//把一级菜单都设为数组
for (i=0; i<select1_len; i++)
{
select2[i] = new Array();
}

//定义基本选项
select2[0][0] = new Option("请选择", " ");

select2[1][0] = new Option("PHP", " ");
select2[1][1] = new Option("ASP", " ");
select2[1][2] = new Option("JSP", " ");

select2[2][0] = new Option("C/C++", " ");
select2[2][1] = new Option("Java", " ");
select2[2][2] = new Option("C#", " ");

select2[3][0] = new Option("Perl", " ");
select2[3][1] = new Option("Ruby", " ");
select2[3][2] = new Option("Python", " ");

//联动函数
function redirec(x)
{
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
{
temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);
}
temp.options[0].selected=true;

}

</script>

 存在以一个不足就是选择请选择的时候不能回到原始状态.

分享到:
评论

相关推荐

    js下拉级联例子

    在JavaScript中,下拉级联(Cascading Dropdown)是一种常见的前端交互设计,它用于创建一组相关联的下拉菜单,其中一个下拉菜单的选择会影响另一个下拉菜单的选项。这样的设计常见于数据筛选、地区选择等场景,可以...

    select级联下拉列表

    以下是一个简单的jQuery示例,展示了如何实现级联下拉列表: ```javascript $(document).ready(function() { $('#province').on('change', function() { var selectedProvince = $(this).val(); // 使用Ajax获取...

    jquery简单实现级联下拉列表

    在给定的代码片段中,我们看到一个简单的级联下拉列表实现。页面中有两个下拉列表,`#s1` 和 `#s2`。`#s1` 的改变会触发 `change()` 函数,该函数根据 `#s1` 的选中值动态修改 `#s2` 的内容。 #### 代码解析 1. **...

    JavaScript级联下拉特效制作

    在网页开发中,级联下拉菜单是一种常见的交互设计,它允许用户在选择一个选项后,根据该选项的值动态加载下一个下拉菜单的内容。这种效果可以用来展示层级关系的数据,比如国家、省份、城市这样的地理信息。在这个...

    级联下拉列表

    级联下拉列表是一种常见的前端交互设计,常用于如地区选择、分类筛选等场景,它使得用户能够通过一个下拉菜单的选择触发另一个下拉菜单的内容更新。在这个案例中,我们只用五句代码就能实现这样的功能,这充分体现了...

    excel设置下拉选项、级联、列头锁定.docx

    ### 设置简单下拉选项 无论是WPS还是Office,都可以通过两种方法来实现。 #### 方法1:设置有效性 1. 在需要设置下拉选项的列旁边,按照顺序列出所有可能的选项。 2. 选中目标列,进入“数据”选项卡,找到并点击...

    javascirpt 级联下拉列表类

    JavaScript 级联下拉列表是一种常见的前端交互设计,它允许用户在选择一个选项后,根据该选项的值动态更新第二个或更多的下拉列表。这种功能在数据层级关系明确、需要用户逐步选择的情况下非常有用,比如省份-城市-...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    jQuery实现的多级级联下拉列表

    在网页设计中,级联下拉列表是一种常见的交互元素,它允许用户在多个下拉菜单之间建立关联,根据前一个菜单的选择动态更新后一个菜单的内容。这种功能在数据过滤、地区选择、分类导航等场景中非常实用。本教程将深入...

    JSP+JavaScript二级级联下拉菜单

    在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。

    JavaScript解析XML实现多级级联下拉列表

    在网页开发中,多级级联下拉列表是一种常见的交互设计,它允许用户在一系列相关的选项中进行选择,其中每个下拉列表的选择会影响下一个下拉列表的可用选项。这种功能通常用于表示层次结构的数据,例如国家-省份-城市...

    javascript四级级联下拉菜单

    总的来说,JavaScript四级级联下拉菜单是前端开发中的一个基础但实用的技术,它结合了JavaScript的动态性与HTML的结构化,为用户提供了一种直观且有效的交互方式。理解并掌握这种技术,对于提升Web开发技能和用户...

    jsp实现级联菜单 jsp实现级联菜单

    本文将详细介绍如何使用JSP技术实现一个简单的级联菜单功能。 #### 二、基础知识简介 1. **JSP (Java Server Pages)**:是一种基于Java技术的动态网页技术标准,用于创建动态网页内容。它允许开发者将HTML代码与...

    AJAX重构+级联下拉列表

    在级联下拉列表中,一个下拉框的选择会影响另一个下拉框的选项。例如,当你在第一个下拉框中选择国家时,第二个下拉框会更新为对应国家的省份或城市。这种交互提高了用户体验,因为它减少了用户的等待时间,并使数据...

    JSP+JavaScript打造二级级联下拉菜单

    本文档将详细解析如何通过JSP(JavaServer Pages)与JavaScript来构建一个简单的二级级联下拉菜单。这种菜单通常用于网站导航或表单选择中,能够根据用户在一级菜单中的选择自动更新二级菜单的内容。 #### 二、关键...

    xml实现级联下拉菜单

    xml实现级联菜单,很简单,完全不需要Ajax,但实现了Ajax的效果

    省市县下拉列列表框级联

    在IT领域,尤其是在Web开发中,"省市县下拉列列表框级联"是一个常见的功能需求,主要用于用户输入地址时提供便利的选择。这种功能通过Dropdownlist(下拉列表框)的级联效果,使得用户在选择省份后,市、县(区)的...

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

    二级级联选择器通常涉及到两个列表,当选择第一个列表中的某个项时,第二个列表会根据选择的结果更新。在uni-app中,我们需要动态调整第二个列表的`range`值。例如: ```html 请选择省份: &lt;view&gt;{{province}} ...

    超简单的级联下拉框例子

    在网页开发或应用程序设计中,级联下拉框是一个必不可少的功能。 本示例“超简单的级联下拉框例子”采用了一种独特且简洁的实现方法,旨在减少代码量,提高可读性,并避免使用数组。数组通常用于存储级联选项的数据...

Global site tag (gtag.js) - Google Analytics