多次元ドロップダウン・ボックスのテスト
4723 ワード
<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>