<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>javascript无限级联动菜单</title>
<script src="prototype.js"></script>
<script src="linkage.js"></script>
<style>
body,td,select {
font-family: Verdana,"宋体";
font-size:12px;
}
.mousehand{
cursor:pointer;
font-size:12px;
padding-left:10px;
text-align:left;
}
.titletable{
padding-left:5px;
background-color:#E9E9E9; }
table.TabBarLevel1{
height:30px;
}
table.TabBarLevel1 td{
border:1px solid #CCCCCC;
height:20px;
background-color:#E1E1E1;
}
table.TabBarLevel1 td.Selected{
border-bottom-width:0px;
background-color:#ffffff;
font-weight:bold;
}
table.TabBarLevel1 td.Black{
border-left-width:0px;
border-top-width:0px;
border-right-width:0px;
background-color:#FFFFFF;
}
table.Content{
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}
table.hide {
display:none;
}
div.container_content {
padding: 40px;
}
#intro_title {
text-align:center;
font-size:14px;
padding-bottom:20px;
font-weight:bold;
}
#intro_foot {
text-align:center;
font-size:10px;
font-family:Verdana;
padding-top:20px;
font-weight:bold;
}
#intro_foot a:link {
color:#999999;
}
</style>
</head>
<body>
<!-- 加载数据源 -->
<xml id="dataSrc2" style="height:0px; width:0px; visibility:hidden;">
<TreeNodes>
<TreeNode Value="亚洲">
<TreeNode Value="韩国"></TreeNode>
<TreeNode Value="日本">
<TreeNode Value="东京"></TreeNode>
</TreeNode>
<TreeNode Value="中国">
<TreeNode Value="山东">
<TreeNode Value="济南"></TreeNode>
<TreeNode Value="青岛"></TreeNode>
</TreeNode>
<TreeNode Value="辽宁"></TreeNode>
<TreeNode Value="河北">
<TreeNode Value="保定"></TreeNode>
<TreeNode Value="石家庄"></TreeNode>
</TreeNode>
</TreeNode>
<TreeNode Value="沙特"></TreeNode>
</TreeNode>
<TreeNode Value="欧洲">
<TreeNode Value="法国"></TreeNode>
<TreeNode Value="英国"></TreeNode>
<TreeNode Value="意大利"></TreeNode>
<TreeNode Value="德国">
<TreeNode Value="法兰克福"></TreeNode>
</TreeNode>
</TreeNode>
</TreeNodes>
</xml>
<p id="intro_title">无限级SELECT联动菜单</p>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="TabBarLevel1" id="TabPage1">
<tr align="center">
<td width="80" id="imageTab1" valign="middle" class="Selected mousehand" onclick="javascript:switchTab('1');">使用示例一</td>
<td width="7" class="Black"> </td>
<td width="80" id="imageTab2" valign="middle" class="mousehand" onclick="javascript:switchTab('2');">使用示例二</td>
<td width="7" class="Black"> </td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content" id="container1">
<tr>
<td height="180">
<div class="container_content">
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center"><b>示例一 (数据源为外部XML文件)</b></td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="12%" height="24" align="center">城市:</td>
<td><select name="city" id="city" USEDATA="dataSrc" SUBCLASS="1">
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">区县:</td>
<td><select name="country" id="country" USEDATA="dataSrc" SUBCLASS="2">
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">乡镇:</td>
<td><select name="town" id="town" USEDATA="dataSrc" SUBCLASS="3">
</select></td>
</tr>
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center"><input type="button" value="提交" onClick="testSubmit('dataSrc')"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content hide" id="container2">
<tr>
<td height="150">
<div class="container_content">
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center"><b>同一页面示例二 (数据源为页面中XML数据岛)</b></td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="12%" height="24" align="center">大洲:</td>
<td><select name="continent" id="continent" USEDATA="dataSrc2" SUBCLASS="1">
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">国家:</td>
<td><select name="state" id="state" USEDATA="dataSrc2" SUBCLASS="2">
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">省:</td>
<td><select name="province" id="province" USEDATA="dataSrc2" SUBCLASS="3">
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">市:</td>
<td><select name="city2" id="city2" USEDATA="dataSrc2" SUBCLASS="4">
</select></td>
</tr>
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center"><input type="button" value="提交" onClick="testSubmit('dataSrc2')"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p id="intro_foot"><a href="mailto:zhangyanan2008@gmail.com">Contact Me</a></p>
</body>
</html>
<script language="javascript">
function switchTab(tabid){
for(var i=1; i<3; i++){
Element.removeClassName($('imageTab' + i), "Selected");
Element.addClassName($("container" + i), "hide");
}
Element.addClassName($('imageTab' + tabid), "Selected");
Element.removeClassName($("container" + tabid), "hide");
}
//测试函数
function testSubmit(theDataSrc) {
var str = "";
var selectNodes = document.getElementsByTagName("select");
for (i = 0; i < selectNodes.length; i++) {
if ($V(selectNodes[i] , "USEDATA") == theDataSrc) {
str += "[" + $V(selectNodes[i] , "name") + "] : Value=" + $F(selectNodes[i]) + " ; Desc=" + selectNodes[i][selectNodes[i].selectedIndex].childNodes[0].nodeValue + "\n";
}
}
alert(str);
}
var linkage = new Linkage("dataSrc", "data.xml");
linkage.BLANK_SELECT = "-------SELECT-------";
linkage.init();
//初始化数据
linkage.initLinkage("dataSrc","01",1);
linkage.initLinkage("dataSrc","0103",2);
linkage.initLinkage("dataSrc","010302",3);
var linkage2 = new Linkage("dataSrc2");
linkage2.init();
//初始化数据
linkage2.initLinkage("dataSrc2","亚洲",1);
linkage2.initLinkage("dataSrc2","中国",2);
</script>
