级联下拉菜单的实现「建议收藏」

级联下拉菜单的实现「建议收藏」级联下拉菜单的实现

大家好,又见面了,我是你们的朋友全栈君。

    最近在项目中用到了级联菜单,在网上查过资料后,大概有两种实现思路:

1.下拉列表中的数据从数据库中自动获取

2.下拉列表中的每一个选项都写在代码中

    相信我们都会选择第一种方法,这样不仅增强了代码的复用性,而且当我们的需求变动,需要显示新的数据时,只要更新数据库就可以了。而第二种方法只能适用于某种情况,需求改变,就需要在代码中进行大量的修改。

    我们今天就先来介绍一下用第二种方法来实现级联下拉菜单的效果

<!DOCTYPE > 
<html>  
	<head> 
		<title> 代码实例:级联菜单 </title> 
		<meta content="text/html; charset=utf-8" /> 
	</head> 
	<body> 
		<select id="College" name="College" size="1" οnchange="Redirect(this.options.selectedIndex)"> 
			<option value="">化学与材料科学学院</option> 
			<option value="">管理学院</option> 
			<option value="">教育学院</option> 
			<option value="">经济学院</option>
			<option value="">其他</option> 
		</select> 
		<select id="Major" name="Major" size="1"> 
			<option value="1">化学</option> 
			<option value="2">材料化学</option> 
			<option value="3">应用化学</option> 
		</select> 
		<script type="text/javascript"> 

			var groups = document.getElementById("College").options.length; 
			var group = new Array(groups) 
			for (i = 0; i < groups; i ++) 
			group[i] = new Array() 
			group[0][0] = new Option("化学","40") 
			group[0][1] = new Option("材料化学","41") 
			group[0][2] = new Option("应用化学","42") 

			group[1][0] = new Option("财务管理本科","1") 
			group[1][1] = new Option("财务管理专接本","2") 
			group[1][2] = new Option("财务会计专科","3") 
			group[1][3] = new Option("财务信息管理专科","4") 

			group[2][0] = new Option("初等教育理本科","80") 
			group[2][1] = new Option("初等教育文本科","81") 
			group[2][2] = new Option("教育学本科","82") 
			group[2][3] = new Option("心理学本科","83") 

			group[3][0] = new Option("国际经济与贸易本科","120") 
			group[3][1] = new Option("市场营销本科","121") 
			group[3][2] = new Option("国际贸易实务专科","122") 
			group[3][3] = new Option("市场营销专科","123") 
			group[3][4] = new Option("金融与证劵专科","124") 

			group[4][0] = new Option("其他","160") 

			var temp = document.getElementById("Major"); 
			function Redirect(x){ 
			   for (m = temp.options.length-1; m > 0; m --) 
			   temp.options[m] = null 
			   for (i = 0; i < group[x].length; i ++){ 
			       temp.options[i] = new Option(group[x][i].text,group[x][i].value); 
			   } 
			   temp.options[0].selected = true 
			} 
		</script>	 

	</body> 
</html> 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/105728.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • eXtremeComponents安装配置

    eXtremeComponents安装配置eXtremeComponents直接下载地址http://sourceforge.net/projects/extremecomp/中文文档:http://lanxin1985.javaeye.

  • mysql数据库——连接查询(内连接:自然连接,等值连接。外连接:左连接,右连接,全连接)「建议收藏」

    mysql数据库——连接查询(内连接:自然连接,等值连接。外连接:左连接,右连接,全连接)「建议收藏」????这里是数据库加油站????如果对你有帮助,给博主一个免费的点赞以示鼓励欢迎各位????点赞????评论收藏⭐️数据库版本:mysql8。0.27如果以下代码执行有问题欢迎留言,一起探讨文章目录内连接自然连接和等值连接的区别内连接的实现方式外连接左连接右连接全连接内连接内连接INNERJOIN是最常用的连接操作。从数学的角度讲就是求两个表的交集,从笛卡尔积的角度讲就是从笛卡尔积中挑出ON子句条件成立的记录。在我看来内连接和等值连接差不多,自然连接是内连接中的一个特殊连接自然连接和

  • oracle创建用户并授权

    一、创建用户登录到system用户以创建其他用户创建的:createuserusernameidentifiedbypassword;二、授权在这里插入代码片

  • iphone android换机助手下载,安卓苹果换机助手[通俗易懂]

    iphone android换机助手下载,安卓苹果换机助手[通俗易懂]安卓苹果换机助手软件由腾讯团队专业打造的一款单品,它可以帮助你的手机自由换机,把各种信息文件都一次转换到新手机中去,安卓苹果换机助手无需联网,不耗费手机流量,传输速度快。功能介绍支持各主流品牌和厂商设备极速秒传。一键轻松换机,支持通讯录、软件、短信、文件、通话记录、书签、图片、音乐、视频、日程等多种数据传输。功能特色【数据全面】支持数据全面,基本覆盖常见的手机各种数据类型,包括图片、视频、联系人、…

  • ELK入门

    ELK入门ELK入门

  • SpringMVC工作原理及其流程

    SpringMVC工作原理及其流程本文介绍SpringMVC的基本原理,对于一个浏览器请求,SpringMVC的处理流程。SpringMVC主要包含一下组件DispatcherServlet-前端控制器HandlerMapping-处理器映射Controller-控制器ViewResolver-视图解析器View-视图Spring的请求流程SpringMVC的核心在于其请求流程,这是使用Spring…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号