[共享]无限级关联下拉菜单[完全js版]
下面是我今天早上做的一个无限级关联下拉菜单，感觉有点儿烦琐，虽然我知道网上很多类似的无限级关联，但是还是想试试大家能不能帮我精简一下。
顶着有分。。
<!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=utf-8 " />
<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 " ondblclick= "sendResult(this.value) " onchange= "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 " onchange= "menuChange( 'menuTable ', this.value, 1) ">
<option value= "0 "> 选择分类 </option>
<script language= "javascript ">
<!--
document.write(readKid(0));
// -->
</script>
</select> </td>
</tr>
</table>
</body>
</html>
[解决办法]
頂啊
[解决办法]
受益了！谢谢了！
[解决办法]
支持一下.
[解决办法]
jf~~~代码易看性不强~~
[解决办法]
顶，代码复不复杂不重要，主要是使用起来方便，执行速度快就好。
[解决办法]
up
[解决办法]
up
[解决办法]
谢谢
[解决办法]
我在这里争分呢
[解决办法]
up
[解决办法]
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];
这个结构能换下就最好啦。。。
[解决办法]
还不错，不过好象不太好应用哦，后面的数据要根据前面的数据多少来定索引，如果中间临时多了数据，那后面的数据不是全要update，而且这样写期初数据会很烦琐，还要计算下。
[解决办法]
顶上
[解决办法]
举个例子吧，比如在上面的基础上我要加个印度，按照muxrwc兄弟说的slice之后的数组应该是下面这样的吧，执行中国的子城市都变了
var menuArr = new Array();
menuArr[1] = [ "中国 ", 0];
menuArr[2] = [ "美国 ", 0];
menuArr[3] = [ "日本 ", 0];
menuArr[4] = [ "印度 ", 0];
menuArr[5] = [ "浙江 ", 1];
menuArr[6] = [ "福建 ", 1];
menuArr[7] = [ "东京 ", 3];
menuArr[8] = [ "杭州 ", 4];
menuArr[9] = [ "温州 ", 4];
menuArr[10] = [ "鹿城 ", 8];
[解决办法]
顶你个肺
[解决办法]
顶你个肺
[解决办法]
谢谢,我正在找呢!
[解决办法]
顶
[解决办法]
今天好好研究了一下
还不错,有点收获谢谢!
[解决办法]
5555555555555
