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

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

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

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

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)


相关推荐

  • Vue 分页器组件[通俗易懂]

    Vue 分页器组件[通俗易懂]<template><divclass=”pagination”><button>上一页</button><button@click=”changecurentpage(1)”v-if=”startEnd.start>1″>1</button><buttonv-if=”startEnd.start>2″>···</button><.

  • 了解ACL—通配符掩码「建议收藏」

    了解ACL—通配符掩码「建议收藏」学习ACL,搞懂ACL就不能不搞定wildcardmask,通配符掩码。说简单点,通配符掩码就是0为绝对匹配,必须严格匹配才行,而1为任意,从某种意义上讲,如果一个8位上有一个1字符,那也只有两种方式,0或者1,但是如果进行组合,那么方式就多了。举例说明吧。一般我们在应用上都是进行地址块的匹配,怎么讲呢?就是说:1)对某个ABC类网进行匹配或者教通配符屏蔽2)对某个子网应用ACL。…

  • python中类(class)

    python中类(class)"""面向过程和面向对象(oop:objectorientedprogramming)的基本概念面向过程:—侧重于怎么做?1.把完成某一个需求的所有步骤从头到尾逐步实现2.根据开发要求,将某些功能独立的代码封装成一个又一个函数3.最后完成的代码,就是顺序的调用不同的函数特点:1.注重步骤与过程,不注重职责分工2.如果需求复杂,代码会变得很复杂3.开发复杂项…

  • Java学习之Maven使用

    Java学习之Maven0x00前言学习并mark过来一些知识点做留存。0x01Maven使用compiled(默认)对主程序是否有效:有效对测试程序是否有效:有效是否参与打包:参

    2021年12月13日
  • jvm垃圾回收详解_java 垃圾回收器

    jvm垃圾回收详解_java 垃圾回收器JVM垃圾回收1.概述JVM会自动帮程序员进行垃圾回收,并不需要程序员手动的进行垃圾回收(C++等语言需要自己手动回收垃圾),了解JVM的垃圾回收,可以帮程序员写出占用内存更小、更高效的程序。1.1什么是垃圾?垃圾是指运行程序中没有任何指针指向的对象,这个对象就是需要被回收的垃圾。1.2什么区域需要进行垃圾回收JVM的内存结构包括五大区域:程序计数器、虚拟机栈、本地方法栈、堆区、方法区。其中程序计数器、虚拟机栈、本地方法栈3个区域随线程而生、随线程而灭,因此这几个区域的内存分配和回

  • 2014年度个人年终工作总结

    2014年度个人年终工作总结2014年度个人年终工作总结2014年度过去了,迎来了新的2015年度,总结在过去的一年中的得失,是为了在新的一年中创建更好的工作秩序。2014年的工作主要围绕以下三个技术点进行的:一、delph

发表回复

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

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