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

全栈程序员站长

发布于 2022-08-09 21:28:04

1.2K0

发布于 2022-08-09 21:28:04

文章被收录于专栏：全栈程序员必看

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

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

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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/105728.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月2，如有侵权请联系 cloudcommunity@tencent.com 删除

https