[共享]无限级关联下拉菜单[完全js版],该怎么解决
日期：2014-05-16 浏览次数：20416 次
[共享]无限级关联下拉菜单[完全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 += "
下面是我今天早上做的一个无限级关联下拉菜单，感觉有点儿烦琐，虽然我知道网上很多类似的无限级关联，但是还是想试试大家能不能帮我精简一下。
顶着有分。。
<!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 += "
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
