<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选择分类</title>
<script language="JavaScript" type="text/javascript">
/*
功能: 无限级关联菜单[完全js版]
作者: 多菜鸟
时间: 2007-04-07
blog: http://blog.csdn.net/kingerq/
数组形如:
menuArr[ID] = [名称, 父ID];
*/
var menuArr = new Array();
menuArr[1] = ["中国", 0];
menuArr[2] = ["美国", 0];
menuArr[3] = ["日本", 0];
menuArr[4] = ["浙江", 1];
menuArr[5] = ["福建", 1];
menuArr[6] = ["东京", 3];
menuArr[7] = ["杭州", 4];
menuArr[8] = ["温州", 4];
menuArr[9] = ["鹿城", 8];
var menuLen = menuArr.length;
//下拉关联操作
//(单元格所在<tr>ID名称,父ID,当前菜单级数)
function menuChange( nameStr, pid, len ){
delKid(nameStr,len);//删除子菜单
var tdId = "";
var d = document.all[nameStr];
var tdLen = d.cells.length;
var result = tdLen>=1 && pid==0 ? "" : readKid(pid);
if( result != "" ) {
tdId = d.insertCell(tdLen);//动态添加一列
}
//alert(tdId.innerHTML+" "+result);
if( tdId != "" )
tdId.innerHTML='<select name="menuid" size="5" οndblclick="sendResult(this.value)" οnchange="menuChange(/''+nameStr+'/', this.value, '+(tdLen+1)+')"><option value=0>请选择分类</option>'+result+'</select>';
}
//动态删除表格列
function delKid(nameStr,len){
if( len < 1 ) len = 1;
var d = document.all[nameStr];
//alert(d.cells.length);
while( d.cells.length > len ) {
d.deleteCell(d.cells.length-1);
}
}
//取得子分类
function readKid( pid) {
var str = "";
for( var i = 0; i < menuLen; i++ ) {
if( menuArr[i] == undefined ) continue;
if( menuArr[i][1] == pid ) str += "<option value='"+i+"'>"+menuArr[i][0]+"</option>";
}
return str;
}
//取得全部父项名称或者ID
//(菜单ID值,分隔符[无值则返回ID字符串])
function getParent(id, text) {
var str = "";
var valArr = new Array();
var i = 0;
while(id) {
valArr[i++] = text == undefined ? id : menuArr[id][0];
id = menuArr[id][1];//父ID
}
var len = valArr.length;
while(len) {
str += (str ? (text == undefined ? "," : text) : "" )+valArr[len-1];
len--;
}
return str;
}
//双击返回结果
function sendResult(pid) {
if( ! readKid(pid)) {//没有子项就输出结果
alert(getParent(pid, ">>"));
}
}
</script>
<style type="text/css">
<!--
body {
background-color: #D4D0C8;
}
-->
</style></head>
<body>
<table border="0" bgcolor="#FFFFFF">
<tr id="menuTable">
<td><select name="menuid" id="menuid" size="5" οnchange="menuChange('menuTable', this.value, 1)">
<option value="0">选择分类</option>
<script language="javascript">
<!--
document.write(readKid(0));
// -->
</script>
</select></td>
</tr>
</table>
</body>
</html>