多维下拉框的测试

最新推荐文章于 2024-04-07 16:12:11 发布

最新推荐文章于 2024-04-07 16:12:11 发布 · 347 阅读

文章标签：

#HTML

WEB 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的多级下拉菜单的方法。通过预定义的数据结构，该方法可以动态生成单位、部门和员工的选择列表，并在选择上一级选项时自动更新下一级列表的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
		<title>测试多维下拉列表</title>
		<script type="text/javascript">

			var arrUnit = new Array();
			arrUnit[0] = new Array(0,"u01","unit1");
			arrUnit[1] = new Array(0,"u02","unit2");

			var arrDept = new Array();
			arrDept[0] = new Array("u01","d01","department1");
			arrDept[1] = new Array("u01","d02","department2");
			arrDept[2] = new Array("u02","d03","department3");
			arrDept[3] = new Array("u02","d04","department4");

			var arrEmp = new Array();
			arrEmp[0] = new Array("d01","e01","employee1");
			arrEmp[1] = new Array("d02","e02","employee2");
			arrEmp[2] = new Array("d03","e03","employee3");
			arrEmp[3] = new Array("d04","e04","employee4");
			arrEmp[4] = new Array("d03","e05","employee5");
			arrEmp[5] = new Array("d04","e06","employee6");

			function body_onload()
			{
				var TD = GetParent(document.all("s0"), "TD");
				TD.innerHTML = MakeMenu(arrUnit, 0, 0, "s0", 1);

				TD = GetParent(document.all("s1"), "TD");
				TD.innerHTML = MakeMenu(arrDept, GetSelectValue(document.all("s0")), 0, "s1", 1);

				TD = GetParent(document.all("s2"), "TD");
				TD.innerHTML = MakeMenu(arrEmp, GetSelectValue(document.all("s1")), 0, "s2", 1);

			}

			function GetParent(src, tag)
			{
				if (src && src.tagName != tag)
				{
				   return(GetParent(src.parentElement, tag));
				}
				return src;
			}

			function GetSelectValue(oSelect)
			{
				if (oSelect.selectedIndex < 0) 
					return 0;	
				return oSelect.options(oSelect.selectedIndex).value;
			}

			function MakeMenu(arrSub, pValue, cValue, name, bulSkip)
			{
				var sHTML = "<select name='" + name + "' onchange='SetSubmenu(this)' >";
				if(bulSkip) sHTML += "<option value=0>please select</option>";
				for(var i=0; i < arrSub.length; i++)
				{
				   if (arrSub[i][0]==pValue)
				   {
				      var tag = (arrSub[i][1]==cValue)?" selected>":">";
				      sHTML += "<option value='" + arrSub[i][1] + "'" + tag + arrSub[i][2] + "</option>";
				   }
				}
				sHTML += "</select>";
				return sHTML;
			}


			function SetSubmenu(pSelect)
			{
				var oOption, sValue;
				if (pSelect.selectedIndex < 0) return;
				   switch (pSelect.name)
				   {
				     case "s0":
					 	//TD=s1
				     	var TD = GetParent(document.all("s1"), "TD");				     	TD.innerHTML = MakeMenu(arrDept, GetSelectValue(document.getElementById("s0")), "0", "s1", 0);
						//TD=s2
						TD = GetParent(document.all("s2"), "TD");
				     	TD.innerHTML = MakeMenu(arrEmp, GetSelectValue(document.getElementById("s1")), "0", "s2", 0);
						break;
					case "s1":
				      	var TD = GetParent(document.all("s2"), "TD");
				      	TD.innerHTML = MakeMenu(arrEmp, GetSelectValue(document.getElementById("s1")), "0", "s2", 0);
				       	break; 
				     default:
					}
			}
		</script>
	</head>
	<body onload="body_onload()">
	   <TABLE>
		<TR>
		<TD>
			<SELECT id="s0" name="s0" onchange="SetSubmenu(this)"></SELECT>
		</TD>
		<TD>
			<SELECT id="s1" name="s1" onchange="SetSubmenu(this)"></SELECT>
		</TD>
		<TD>
			<SELECT id="s2" name="s2" onchange="SetSubmenu(this)"></SELECT>
		</TD>
		</TR>
	  </TABLE>
	</body>
</html>