`
xiesuntian
  • 浏览: 5307 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
最近访客 更多访客>>
社区版块
存档分类
最新评论

js级联下拉列表

    博客分类:
  • js
 
阅读更多

在看例子前首先要对这两个对象有认识:

1) Select对象
属性
a. selectedIndex: 用户选择的选项的下标,下标从0开始。
b. length: 获取戒者设置选项的个数。
c. options: 返回一个数组,数组元素是Option对象。

2) Option对象
属性
a. text: 选项的文本内容
b. value: 选项的值
c. selected: 当该选项被选上,值为true,否则为false。

创建一个Option对象。 var op = new Option(text,value);

例子:

    js:

<script type="text/javascript">
	function doSelect(index){
		var arr = new Array();
		arr[0]=[new Option("AAA1","1"),new Option("AAA2","2")];
		arr[1]=[new Option("BBB1","1"),new Option("BBB2","2"),new Option("BBB3","3")];
		arr[2]=[new Option("CCC1","1"),new Option("CCC2","2"),new Option("CCC3","3"),new Option("CCC4","4")];
		
		var s2 = document.getElementById("s2");
		s2.innerHTML="";
		for(var i=0;i<arr[index].length;i++){
			s2.options[i] = arr[index][i];
		}
	}

	</script>

    HTML:

<body>
    <select id="s1" onchange="doSelect(this.selectedIndex)">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    </select>
    
     <select id="s2">
     <option value="-1">XXX</option>
    </select>
  </body>

 

  • 大小: 2.2 KB
分享到:
评论

相关推荐

    javascript级联下拉列表和正则表达式

    javascript 级联下拉列表 正则表达式

    input 级联下拉列表

    在网页设计和开发中,`input`级联下拉列表是一种常见的交互元素,它允许用户在选择一个选项后,根据该选项的值动态地显示相关的第二个或更多下拉列表。这种设计模式通常用于处理层级关系的数据,如国家/地区、省份/...

    jquery简单实现级联下拉列表

    然而,在实际项目中,可能需要处理更复杂的逻辑和更大的数据量,此时可以考虑使用更高级的前端框架如React或Vue.js,它们提供了更强大的状态管理和组件化开发能力,能够更好地支持大规模的级联下拉列表和其他复杂的...

    javascript级联下拉列表实例代码(自写).docx

    ### JavaScript级联下拉列表实例解析 #### 一、引言 级联下拉列表是一种常见的Web表单组件,主要用于需要根据前一个选择的结果来动态更新后续选择项的情况。例如,在用户选择了一个国家之后,相应的省份下拉列表会...

    网页表单级联下拉列表自动填写方法

    网页表单级联下拉列表自动填写方法 网页表单级联下拉列表自动填写方法是指在网页表单中,多个下拉列表框之间存在关联关系,选择前一个下拉列表框的选项后,后一个下拉列表框才会出现相关的选项,这样可以实现自动...

    级联下拉列表工具类,js实现

    ### 级联下拉列表工具类:JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式,特别是在处理多层级数据时,它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...

    javascript实现无限级级联下拉列表

    在JavaScript编程中,实现无限级联下拉列表是一项常见的需求,尤其在构建多级导航菜单、组织结构或者层级关系的数据展示时。无限级联下拉列表允许用户逐级选择,每一级的选择会影响到下一级的显示内容。下面我们将...

    Ajax级联下拉列表.rar

    在本示例中,"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据...

    JavaScript动态级联下拉列表框

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

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

    **jQuery实现的多级级联下拉列表** 在网页开发中,级联下拉列表是一种常见的交互元素,它允许用户从一系列相关选项中选择,这些选项根据先前的选择动态更新。在本项目中,我们利用jQuery库来实现这种功能,同时结合...

    select级联下拉列表

    在网页设计中,"select级联下拉列表"是一种常见的交互元素,用于创建省市区选择、类别层级展示等场景。这种技术通常结合JavaScript(JS)、HTML5和jQuery库来实现,使得用户能够在多个下拉菜单之间进行联动选择,...

    级联下拉列表

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

    javascirpt 级联下拉列表类

    总的来说,JavaScript级联下拉列表是前端开发中常见的一种功能,通过合理的数据结构和事件处理,可以实现灵活的用户交互。对于初学者来说,这是一个很好的实践项目,可以帮助理解和掌握JavaScript与DOM操作。对于...

    ajax实现级联下拉列表代码

    在提供的"ajax实现的级联下拉列表代码.txt"文件中,应该包含了实现上述过程的具体JavaScript代码。这个文件可能包含了一个或多个函数,用于初始化下拉列表、绑定事件监听器、构建AJAX请求、解析响应数据以及更新DOM...

    jQuery 级联下拉列表(修正版)

    在网页开发中,级联下拉列表是一种常见的交互设计,它允许用户在多个下拉框之间建立联动关系,通常用于地区选择(如省市区)、部门结构等场景。本知识点主要聚焦于使用jQuery实现的级联下拉列表,特别是修正版的实现...

    jQuery 级联下拉列表

    在网页开发中,级联下拉列表是一种常见的交互设计,常用于实现省市区选择、类别筛选等场景。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和Ajax交互,同时也提供了丰富的插件来扩展功能。在这个...

    《使用面向对象的方式封装js级联下拉菜单列表的实例教程》源码

    本文件属于文章《使用面向对象的方式封装js级联下拉菜单列表的实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中cascadeMenu.js文件封装了级联菜单插件,可直接引入到html文件中使用。

    Html dom中的select, option_ 级联下拉列表

    文中练习7的示例代码演示了如何使用JavaScript和HTML来实现级联下拉列表。级联下拉列表涉及到监听某个下拉列表的变化事件,然后根据选择的值来动态更改另一个下拉列表的选项。这通常需要事先准备相关的数据源,然后...

    JavaScript级联下拉特效制作

    总的来说,制作JavaScript级联下拉特效是一个很好的实践项目,它涵盖了基本的JavaScript编程、DOM操作以及响应式设计的核心概念。通过这个过程,你可以提升你的JavaScript编程技巧,并为你的网页增添更丰富的交互性...

    jsp出生日期三级级联下拉列表

    在本文中,我们将深入探讨如何在JSP(JavaServer Pages)中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景,让用户能够方便地选择他们的出生年、月和日。 首先,...

Global site tag (gtag.js) - Google Analytics