无限连动下拉菜单

<scripttype=text/javascript>
functionSelectOption(nodeId,nodeName,nodeValue,nodeIdx){
this.nodeId=nodeId;
this.nodeName=nodeName;
this.nodeValue=nodeValue;
this.nodeIdx=nodeIdx;
}

/**
*创建新的下拉列表对象
*MenuValue:为SelectOption列表数组
**/
varSelObj;
varMenuValue;
varMenuLen;
varSelObjLen;
functionConnDownSelect(selObj,menuValue,DefaultSel){
if(selObj==null||menuValue==null)return;
SelObj=selObj;
MenuValue=menuValue;
MenuLen=MenuValue.length?MenuValue.length:1;
SelObjLen=SelObj.length?SelObj.length:1;
}
/**
*选择列表数据值
*nodeId:节点Id
*nodeName:节点名称
*nodeValue:节点值
*nodeIdx:节点级数：从0开始
*/
/**
*往obj对象添加一个新的节点*/
ConnDownSelect.prototype.addOption=function(obj,selectOption){
varoOption=document.createElement('OPTION');
oOption.nodeId=selectOption.nodeId;
oOption.nodeIdx=selectOption.nodeIdx;
oOption.text=selectOption.nodeName;
oOption.value=selectOption.nodeValue;
obj.options.add(oOption);
}
/**
*选中一个值*/
ConnDownSelect.prototype.selectByNodeId=function(selObj,selNodeId){
varopts=selObj.options;
for(vari=0;i<opts.length;i++){
if(opts[i].nodeId==selNodeId){
opts[i].selected=true;
break;
}
}
}
/**mode:true向后比较，*/
ConnDownSelect.prototype.selectByLikeNodeId=function(selObj,selLikeNodeId,mode){
varopts=selObj.options;
for(vari=0;i<opts.length;i++){
if(mode){
if(opts[i].nodeId.indexOf(selLikeNodeId+"_")==0){
opts[i].selected=true;
break;
}
}
else{
if(selLikeNodeId.indexOf(opts[i].nodeId+"_")==0){
opts[i].selected=true;
break;
}
}
}
}
ConnDownSelect.prototype.selectByNodeValue=function(selObj,selNodeValue){
varopts=selObj.options;
for(vari=0;i<opts.length;i++){
if(opts[i].nodeValue==selNodeValue){
opts[i].selected=true;
break;
}
}
}
ConnDownSelect.prototype.selectByNodeName=function(selObj,selNodeName){
varopts=selObj.options;
for(vari=0;i<opts.length;i++){
if(opts[i].nodeName==selNodeName){
opts[i].selected=true;
break;
}
}
}
/**
*创建新的select列表对象*/
ConnDownSelect.prototype.createSelectInstance=function(obj){
obj.options.length=0;
varidx;
varnode;
for(vari=0;i<SelObjLen;i++){
node=SelObjLen==1?SelObj:selObj[i];
if(node==obj){
idx=i;
break;
}
}
this.addOption(obj,newSelectOption("","所有","",idx))
}
/**
*初始化数据*/
ConnDownSelect.prototype.init=function(){
varselectOpt;
if(SelObjLen>1){//多级联动
for(vari=0;i<SelObjLen;i++){
SelObj[i].οnchange=Selects;
this.createSelectInstance(SelObj[i]);
}
//加载所有菜单
for(vari=0;i<MenuLen;i++){
selectOpt=MenuLen==1?MenuValue:MenuValue[i];
this.addOption(SelObj[selectOpt.nodeIdx],selectOpt);
}
}
//1级
else{
SelObj.οnchange=Selects;
this.createSelectInstance(SelObj);
for(vari=0;i<MenuLen;i++){
selectOpt=MenuLen==1?MenuValue:MenuValue[i];
this.addOption(SelObj,selectOpt);
}
}

}
/**
*选中某个下拉框selectOption:对象*/
functionSelects(){
cds=newConnDownSelect(SelObj,MenuValue,"");
varsrc=event.srcElement;
varopts=src.options;
varopt;
varvalue=src.value;
for(vari=0;i<opts.length;i++){
opt=opts[i];
if(opt.value==value){
nodeId=opt.getAttribute("nodeId");
nodeName=opt.innerText;
nodeValue=value;
nodeIdx=opt.getAttribute("nodeIdx");
break;
}
}
//获得上一个nodeId
varnextNodeId="";
varnextNodeIdx=0;
for(vari=parseInt(nodeIdx)-1;i>=0;i--){
if(SelObj[i].value!=""){
nextNodeId=SelObj[i].value;
nextNodeIdx=i;
break;
}
}
if(nextNodeId==""){
nextNodeId=nodeId.indexOf("_")==-1?nodeId:nodeId.substring(0,nodeId.indexOf("_"));
}
for(vari=0;i<SelObj[nextNodeIdx].options.length;i++){
if(nextNodeId==SelObj[nextNodeIdx].options[i].getAttribute("value")){
nextNodeId=SelObj[nextNodeIdx].options[i].getAttribute("nodeId");
}
}
selectOption=newSelectOption(nodeId,nodeName,nodeValue,nodeIdx);
varselObjs;
if(selectOption.nodeId==null||selectOption.nodeId==""){
//更新所有子项数据
for(vari=parseInt(nodeIdx)+parseInt(1);i<SelObjLen;i++){
selObjs=SelObjLen>1?SelObj[i]:SelObj;
cds.createSelectInstance(selObjs);
for(varj=0;j<MenuLen;j++){
if(MenuValue[j].nodeIdx==i&&(MenuValue[j].nodeId.indexOf(nextNodeId+"_")==0||nodeIdx==0)){
cds.addOption(selObjs,MenuValue[j]);
}
}
if(selObjs.options.length==1){
selObjs.options.length=0;
selObjs.style.display="none";
}
else{
selObjs.style.display="block";
}
}
return;
}


varnodeId=selectOption.nodeId;
varnodeIdx=selectOption.nodeIdx;
varnodeLId=nodeId;
vargrandFId=nodeId.indexOf("_")==-1?nodeId:nodeId.substring(0,nodeId.indexOf("_"));
//第1层不要改动，只要选择
cds.selectByNodeId(SelObjLen==1?SelObj:SelObj[0],grandFId);
//第2层到选中的层之间即父亲的兄弟都要包含
for(vari=1;i<selectOption.nodeIdx;i++){
selObjs=SelObjLen>1?SelObj[i]:SelObj;
cds.createSelectInstance(selObjs);
for(varj=0;j<MenuLen;j++){
selectOpt=MenuLen==1?MenuValue:MenuValue[j];
if(selectOpt.nodeIdx==i&&selectOpt.nodeId.indexOf(grandFId+"_")==0){
cds.addOption(selObjs,selectOpt);
}
}
cds.selectByLikeNodeId(selObjs,selectOption.nodeId,false);
}



//更新本身数据值(兄弟：即父亲相同）
varnodeId=selectOption.nodeId;
varnodeIdx=selectOption.nodeIdx;
varnodeLId=nodeId;
if(nodeIdx>0){
pos=nodeId.lastIndexOf("_");
if(pos!=-1)nodeLId=nodeId.substring(0,pos);
selObjs=SelObjLen==1?SelObj:SelObj[selectOption.nodeIdx];
cds.createSelectInstance(selObjs);
for(varj=0;j<MenuLen;j++){
selectOpt=MenuLen==1?MenuValue:MenuValue[j];
if(selectOpt.nodeIdx==nodeIdx&&selectOpt.nodeId.indexOf(nodeLId)==0){
cds.addOption(selObjs,selectOpt);
}

}
cds.selectByNodeId(src,nodeId);
}
//更新子项数据
for(vari=parseInt(selectOption.nodeIdx)+parseInt(1);i<SelObjLen;i++){
selObjs=SelObjLen>1?SelObj[i]:SelObj;
cds.createSelectInstance(selObjs);
for(varj=0;j<MenuLen;j++){
selectOpt=MenuLen==1?MenuValue:MenuValue[j];
if(selectOpt.nodeIdx==i&&(selectOpt.nodeId.indexOf(nodeId+"_")==0||nextNodeId=="")){
cds.addOption(selObjs,selectOpt);
}
}
cds.selectByNodeId(selObjs,"");
}
for(vari=parseInt(selectOption.nodeIdx)+parseInt(1);i<SelObjLen;i++){
selObjs=SelObjLen>1?SelObj[i]:SelObj;
if(selObjs.options.length==1){
selObjs.options.length=0;
selObjs.style.display="none";
}
else{
selObjs.style.display="block";
}
}


}
</script>
<!--页面调用demo-->

<html>
<body>
<Table>
<Tr>
<td>
<selectid="sel1"></select>
</td>
<td>
<selectid="sel2"></select>
</td>
<Td>
<selectid="sel3"></select>
</td>
<td>
<selectid="sel4"></select>
</td>
<td>
<selectid="sel5"></select>
</td>
<td>
<selectid="sel6"></select>
</td>
<td>
<selectid="sel7"></select>
</td>
<td>
<selectid="sel8"></select>
</td>
</table>
</body>
</html>
<scripttype="text/javascript">
varselObj=[document.getElementById("sel1"),document.getElementById("sel2"),document.getElementById("sel3"),document.getElementById("sel4"),
document.getElementById("sel5"),document.getElementById("sel6"),document.getElementById("sel7"),document.getElementById("sel8")];

varmenu=[newSelectOption('1','one','1','0'),newSelectOption('2','two','2','0'),newSelectOption('3','three','3','0'),
newSelectOption('1_1','one_1','11','1'),newSelectOption('1_2','one_2','12','1'),newSelectOption('1_3','one_3','13','1'),newSelectOption('1_4','one_4','14','1'),
newSelectOption('2_1','two_1','21','1'),newSelectOption('2_2','two_2','22','1'),newSelectOption('two_3','one_3','23','1'),
newSelectOption('1_1_1','one_1_1','111','2'),newSelectOption('1_1_2','one_1_2','112','2'),newSelectOption('1_1_3','one_1_3','113','2'),
newSelectOption('2_1_1','2_1_1','211','2'),newSelectOption('2_1_2','2_1_2','212','2'),newSelectOption('2_1_3','2_1_3','213','2'),
newSelectOption('1_1_1_1','one_1_11','1111','3'),newSelectOption('1_1_1_2','one_1_21','1112','3'),
newSelectOption('1_1_2_1','one_1_21','1121','3'),newSelectOption('1_1_2_2','one_1_21','1122','3'),
newSelectOption('1_1_2_1_1','one_1_211','11211','4'),newSelectOption('1_1_2_1_2','one_1_212','11212','4'),newSelectOption('1_1_2_1_3','one_1_213','11213','4'),
newSelectOption('1_1_2_1_1_1','one_1_2111','112111','5'),newSelectOption('1_1_2_1_1_2','one_1_2112','112112','5'),
newSelectOption('1_1_2_1_1_2_1','one_1_21121','112111','6'),newSelectOption('1_1_2_1_1_2_2','one_1_21122','112112','6'),
newSelectOption('1_1_2_1_1_2_1_1','one_1_211211','1121111','7'),newSelectOption('1_1_2_1_1_2_1_2','one_1_211212','1121112','7')
]
cds=newConnDownSelect(selObj,menu,"");
cds.init();
</script>