前端讲义23_Javascript数组应用实例-级联的下拉列表

最新推荐文章于 2023-03-10 20:23:09 发布
最新推荐文章于 2023-03-10 20:23:09 发布
阅读量216 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/msh2016/article/details/89765005
版权

选中第一个列表项，级联第二个下拉列表

运行效果

HTM5规范，源码代码文件 cascadeMenu.html , 如下：

 

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="msh" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> cascadeMenu</title>
	<style type="text/css">
		select {
			font-size: 11pt;
			width:120px;
		}
	</style>
	<script type="text/javascript">
		// 构造数组
		var detail_show = [];
		var detail_value = [];
		detail_show[0] = [];
		detail_value[0] = [];
		detail_show[0][0] = 'JavaScript';
		detail_value[0][0] = '0101';
		detail_show[0][1] = 'DOM';
		detail_value[0][1] = '0102';
		detail_show[0][2] = 'CSS3';
		detail_value[0][2] = '0103';
		detail_show[1] = [];
		detail_value[1] = [];
		detail_show[1][0] = 'C#';
		detail_value[1][0] = '0201';
		detail_show[1][1] = 'Java';
		detail_value[1][1] = '0202';
		detail_show[1][2] = 'PHP';
		detail_value[1][2] = '0203';
		detail_show[2] = [];
		detail_value[2] = [];
		detail_show[2][0] = 'MSSQL';
		detail_value[2][0] = '0301';
		detail_show[2][1] = 'Oracle';
		detail_value[2][1] = '0302';
		detail_show[2][2] = 'Mysql';
		detail_value[2][2] = '0303';
		function change(target)
		{
			// 获取级联的下拉列表
			var deselect = document.getElementById("deselect");
			// 清空第二个下拉列表的选项
			deselect.innerHTML = null;
			var m = target.selectedIndex;
			if ( m >= 0 ) 
			{
				for(i = 0; i < detail_show[m].length; i++)
				{
					// 循环构造option,然后放在指定的option中
					// new Option(show,value)构造一个option
					 deselect.options[i] = new Option(detail_show[m][i], 
						detail_value[m][i]);
				}
				// 设置默认选中第一个列表项
				deselect.options[0].selected = true;
			}
		}
	</script>
</head>
<body>
<div align="center">
<h2>cascadeMenu</h2>
<form id="mshForm">
	<select name="caselect" id="caselect" onchange="change(this)";>
		<option value="01" >前端设计</option>
		<option value="02">开发语言</option>
		<option value="03">数据库</option>
	</select>
	<select name="deselect" id="deselect">
	</select>
</form>
</div>
</body>
</html>

 

 

 

 

 

木生火
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript级联下拉列表实例代码(自写)
01-19
1，Select对象。 属性 a,selectedIndex:用户选择的选项的下标，下标从0开始 b,length: 获取或者设置选项的个数 c,options: 返回一个数组，数组元素是Option对象 2，Options... 我写的一个级联下拉列表： 代码如下： 代
下拉列表多级联动前端实现
实践求真知
12-05 2021
一 获取一级分类 1 组件数据定义 添加在Info.vue的data中 subjectList: [], // 一级分类 subjectLevelTwoList: [] // 二级分类 2 组件脚本 表单初始化时获取一级分类嵌套列表，引入subject api import subjectApi from '@/api/subject' 定义方法 // 获取课程分类列表 initSubjectList() { subjectApi.g
JavaScript Array 数组对象实例集合
梁辰兴的博客
03-10 581
源码DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 梁辰兴实例 < body > < p id = " demo " > 单击按钮删除数组的最后一个元素。
JavaScript数组常用方法(操作)及其应用举例
qq_42420490的博客
03-19 233
数组常用方法(操作)及应用 1、我们知道，数组是带编号的有序的数据集合，所以对数组的操作一般不外乎是对其索引(下标)的操作。另外，我们一般对数据的操作也不外乎是数据的调用、修改(赋值等)、增删等。了解了这些，再来看数组Array的方法，便容易理解了。然后再通过这些方法，我们来总结其规律(思想)。注：代码上面是此方法的说明。 push() ；1个参数：elementN。可以接收任意数量的参数，并把...
JavaScript -- 数组常用方法及示例代码总结
Qlz的博客
12-06 613
数组常见方法总结，包括： 1 Array.isArray() 2 at() 3 concat() 4 indexOf() 5 lastIndexOf() 6 join() 7 slice() 8 push() 9 pop() 10 unshift() 11 shift() 12 splice() 13 reverse() 14 sort() 15 forEach() 16 filter() 17 map() 18 reduce()
使用vue elementUI设置省市县三级联动的下拉列表框
热门推荐
Zhou_siyue的博客
04-01 2万+
在前端项目开发中，经常会遇到省市县三级联动的下拉列表框组的问题，许多小伙伴第一次遇到这种问题的时候都会感觉无从下手，今天就给大家分享以下我的实现方法，希望能给大家在这方面的问题上提供一些帮助和解决的思路，以便今后在遇到同类问题的时候可以轻松应对，以下内容为具体的实现过程： ...
JavaScript XML实现两级级联下拉列表
10-30
用xml作为存储容器，不用数据库，速度和效率高些。
threeH.rar_MATLAB H桥_cascade H-bridge_级联_级联H_级联H 桥
07-15
三相级联H桥的研究和应用，希望能够对大家有所帮助，能和大家多交流
JS数组（Array）应用大全！！！
T_SmileEyes的博客
07-18 1万+
                                                         【书山有路勤为径，学海无涯苦作舟】 一、生成数组 1、使用Array构造函数：  var arr = new Array(10);   //创建一个包含10项的数组     2、使用数组字面量表示法： var arr1 = [10]; // console.log(arr)   ...
JavaScript数组常用的实例方法
前端开发小白9527
04-21 311
1 concat() 连接两个或更多的数组，并返回结果 let arr = [1,2,3] let arr2 = [4,5,6] let arr3 = [7,8,9] arr.concat(arr2,arr3) console.log(arr) // [1,2,3,4,5,6,7,8,9] 2 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔 参数可选，指定要使用的分隔符 let arr = new Array(3) arr[0] =......
JavaScript基础篇——数组案例合集
m0_47182519的博客
11-08 452
出场四次洒出
一段基于Rust语言的计算斐波那契数列的代码
06-16
一段基于Rust语言的计算斐波那契数列的代码
神经网络详细介绍.docx
06-16
神经网络（Neural Network）是一种模仿生物神经系统结构和功能的计算模型。它由大量的神经元（或称为节点）组成，这些神经元通过突触（或称为连接）相互连接。神经网络可以用于各种人工智能任务，如图像识别、语音识别、自然语言处理等。 神经网络的基本结构包括输入层、隐藏层和输出层。其中，输入层接收外界的输入信息，隐藏层通过各种激活函数对输入信息进行处理和转换，输出层则将处理后的信息输出给外界。此外，神经网络还包括权重和偏置等参数，它们用于控制神经元之间的连接强度和偏移量。 神经网络的训练过程通常采用反向传播算法，即从输出层开始，根据输出误差向后传递并计算每个神经元的误差，然后根据误差调整神经元的权重和偏置，直到整个网络的输出误差达到最小值。 神经网络的应用非常广泛，如人脸识别、语音识别、自然语言处理、医疗诊断、金融预测等领域。随着深度学习技术的发展，神经网络的层数也越来越深，处理的信息也越来越复杂。
基于matlab 9 电平 H 桥逆变器.zip
06-16
代码下载：完整代码，可直接运行 ；运行版本：2022a或2019b或2014a；若运行有问题，可私信博主； **仿真咨询 1 各类智能优化算法改进及应用** 生产调度、经济调度、装配线调度、充电优化、车间调度、发车优化、水库调度、三维装箱、物流选址、货位优化、公交排班优化、充电桩布局优化、车间布局优化、集装箱船配载优化、水泵组合优化、解医疗资源分配优化、设施布局优化、可视域基站和无人机选址优化 **2 机器学习和深度学习方面** 卷积神经网络（CNN）、LSTM、支持向量机（SVM）、最小二乘支持向量机（LSSVM）、极限学习机（ELM）、核极限学习机（KELM）、BP、RBF、宽度学习、DBN、RF、RBF、DELM、XGBOOST、TCN实现风电预测、光伏预测、电池寿命预测、辐射源识别、交通流预测、负荷预测、股价预测、PM2.5浓度预测、电池健康状态预测、水体光学参数反演、NLOS信号识别、地铁停车精准预测、变压器故障诊断 **3 图像处理方面** 图像识别、图像分割、图像检测、图像隐藏、图像配准、图像拼接、图像融合、图像增强、图像压缩感知 **4 路径规划方面** 旅行商问题（TSP）、车辆路径问题（VRP、MVRP、CVRP、VRPTW等）、无人机三维路径规划、无人机协同、无人机编队、机器人路径规划、栅格地图路径规划、多式联运运输问题、车辆协同无人机路径规划、天线线性阵列分布优化、车间布局优化 **5 无人机应用方面** 无人机路径规划、无人机控制、无人机编队、无人机协同、无人机任务分配 **6 无线传感器定位及布局方面** 传感器部署优化、通信协议优化、路由优化、目标定位优化、Dv-Hop定位优化、Leach协议优化、WSN覆盖优化、组播优化、RSSI定位优化 **7 信号处理方面** 信号识别、信号加密、信号去噪、信号增强、雷达信号处理、信号水印嵌入提取、肌电信号、脑电信号、信号配时优化 **8 电力系统方面** 微电网优化、无功优化、配电网重构、储能配置 **9 元胞自动机方面** 交通流 人群疏散 病毒扩散 晶体生长 **10 雷达方面** 卡尔曼滤波跟踪、航迹关联、航迹融合
pyzmq-16.0.4.tar.gz
最新发布
06-16
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
php本科期末复习资料.zip
06-16
php本科期末复习资料.zip
数据库管理工具:dbeaver-ce-23.2.2-macos-x86-64.dmg
06-16
1.DBeaver是一款通用数据库工具，专为开发人员和数据库管理员设计。 2.DBeaver支持多种数据库系统，包括但不限于MySQL、PostgreSQL、Oracle、DB2、MSSQL、Sybase、Mimer、HSQLDB、Derby、SQLite等，几乎涵盖了市场上所有的主流数据库。 3.支持的操作系统：包括Windows（2000/XP/2003/Vista/7/10/11）、Linux、Mac OS、Solaris、AIX、HPUX等。 4.主要特性： 数据库管理：支持数据库元数据浏览、元数据编辑（包括表、列、键、索引等）、SQL语句和脚本的执行、数据导入导出等。 用户界面：提供图形界面来查看数据库结构、执行SQL查询和脚本、浏览和导出数据，以及处理BLOB/CLOB数据等。用户界面设计简洁明了，易于使用。 高级功能：除了基本的数据库管理功能外，DBeaver还提供了一些高级功能，如数据库版本控制（可与Git、SVN等版本控制系统集成）、数据分析和可视化工具（如图表、统计信息和数据报告）、SQL代码自动补全等。
数据库管理工具:dbeaver-ce-23.3.0-x86-64-setup.exe
06-16
1.DBeaver是一款通用数据库工具，专为开发人员和数据库管理员设计。 2.DBeaver支持多种数据库系统，包括但不限于MySQL、PostgreSQL、Oracle、DB2、MSSQL、Sybase、Mimer、HSQLDB、Derby、SQLite等，几乎涵盖了市场上所有的主流数据库。 3.支持的操作系统：包括Windows（2000/XP/2003/Vista/7/10/11）、Linux、Mac OS、Solaris、AIX、HPUX等。 4.主要特性： 数据库管理：支持数据库元数据浏览、元数据编辑（包括表、列、键、索引等）、SQL语句和脚本的执行、数据导入导出等。 用户界面：提供图形界面来查看数据库结构、执行SQL查询和脚本、浏览和导出数据，以及处理BLOB/CLOB数据等。用户界面设计简洁明了，易于使用。 高级功能：除了基本的数据库管理功能外，DBeaver还提供了一些高级功能，如数据库版本控制（可与Git、SVN等版本控制系统集成）、数据分析和可视化工具（如图表、统计信息和数据报告）、SQL代码自动补全等。
电视机固件升级康佳LED55R6000U
06-16
电视机固件升级康佳LED55R6000U
uniapp中的后端返回数组，前端uni-data-picker级联选择器如何回显数据
07-14
在uni-app中，如果后端返回的是一个数组，前端可以使用uni-data-picker级联选择器来回显数据。以下是一种实现方法： 1. 在页面的data中定义一个空的数组，用于存储级联选择器的选中值。 ```javascript data() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值