无限连动下拉菜单

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type=text/javascript>
function SelectOption(nodeId,nodeName,nodeValue,nodeIdx){
   this.nodeId    = nodeId;
   this.nodeName  = nodeName;
   this.nodeValue = nodeValue;
   this.nodeIdx   = nodeIdx;
}

/**
 *创建新的下拉列表对象
 *MenuValue:为SelectOption列表数组
 **/
var SelObj;
var MenuValue;
var MenuLen;
var SelObjLen;
function ConnDownSelect(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){
      var oOption = 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){
      var opts = selObj.options;
      for(var i=0;i<opts.length;i++){
         if(opts[i].nodeId==selNodeId){
            opts[i].selected = true;
            break;
         }
      }
}
/**mode:true向后比较，*/
ConnDownSelect.prototype.selectByLikeNodeId = function(selObj,selLikeNodeId,mode){
      var opts = selObj.options;
      for(var i=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){
      var opts = selObj.options;
      for(var i=0;i<opts.length;i++){
         if(opts[i].nodeValue==selNodeValue){
            opts[i].selected = true;
            break;
         }
      }
}
ConnDownSelect.prototype.selectByNodeName = function(selObj,selNodeName){
      var opts = selObj.options;
      for(var i=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;
      var idx;
      var node;
      for(var i=0;i<SelObjLen;i++){
               node = SelObjLen==1?SelObj:selObj[i];
               if(node==obj){
                  idx = i;
                  break;
               }
      }
      this.addOption(obj,new SelectOption("","所有","",idx))
}
/**
*初始化数据*/
ConnDownSelect.prototype.init = function(){
   var selectOpt;
   if(SelObjLen>1){ //多级联动
   for(var i=0;i<SelObjLen;i++){
              SelObj[i].onchange = Selects;
              this.createSelectInstance(SelObj[i]);
   }
   //加载所有菜单
   for(var i=0;i<MenuLen;i++){
           selectOpt = MenuLen==1?MenuValue:MenuValue[i];
           this.addOption(SelObj[selectOpt.nodeIdx],selectOpt);
        }
   }
   //1级
   else{
       SelObj.onchange = Selects;
       this.createSelectInstance(SelObj);
       for(var i=0;i<MenuLen;i++){
           selectOpt = MenuLen==1?MenuValue:MenuValue[i];
           this.addOption(SelObj,selectOpt);
       }
   }

}
/**
*选中某个下拉框selectOption:对象*/
function Selects(){
     cds = new ConnDownSelect(SelObj,MenuValue,"");
     var src = event.srcElement;
     var opts = src.options;
     var opt;
     var value = src.value;
     for(var i=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
     var nextNodeId = "";
     var nextNodeIdx = 0;
     for(var i=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(var i=0;i<SelObj[nextNodeIdx].options.length;i++){
        if(nextNodeId==SelObj[nextNodeIdx].options[i].getAttribute("value")){
            nextNodeId = SelObj[nextNodeIdx].options[i].getAttribute("nodeId");
        }
     }
     selectOption = new SelectOption(nodeId,nodeName,nodeValue,nodeIdx);
     var selObjs;
     if(selectOption.nodeId==null||selectOption.nodeId==""){
     //更新所有子项数据
     for(var i=parseInt(nodeIdx)+parseInt(1);i<SelObjLen;i++){
                selObjs = SelObjLen>1?SelObj[i]:SelObj;
                cds.createSelectInstance(selObjs);
                for(var j=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;
     }
     
     
     var nodeId  =  selectOption.nodeId;
     var nodeIdx =  selectOption.nodeIdx;
     var nodeLId =  nodeId;
     var grandFId=  nodeId.indexOf("_")==-1?nodeId:nodeId.substring(0,nodeId.indexOf("_"));
     //第1层不要改动，只要选择
     cds.selectByNodeId(SelObjLen==1?SelObj:SelObj[0],grandFId);
     //第2层到选中的层之间即父亲的兄弟都要包含
     for(var i=1;i<selectOption.nodeIdx;i++){
     selObjs = SelObjLen>1?SelObj[i]:SelObj;
     cds.createSelectInstance(selObjs);
     for(var j=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);
     }
    
    
    
     //更新本身数据值(兄弟：即父亲相同）
     var nodeId  =  selectOption.nodeId;
     var nodeIdx =  selectOption.nodeIdx;
     var nodeLId =  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(var j=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(var i=parseInt(selectOption.nodeIdx) + parseInt(1);i<SelObjLen;i++){
     selObjs = SelObjLen>1?SelObj[i]:SelObj;
     cds.createSelectInstance(selObjs);
     for(var j=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(var i=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>
     <select id="sel1"></select>
     </td>
     <td>
     <select id="sel2"></select>
     </td>
     <Td>
     <select id="sel3"></select>
     </td>
     <td>
     <select id="sel4"></select>
     </td>
     <td>
     <select id="sel5"></select>
     </td>
     <td>
     <select id="sel6"></select>
     </td>
     <td>
     <select id="sel7"></select>
     </td>
     <td>
     <select id="sel8"></select>
     </td>
  </table>
  </body>
</html>
<script type="text/javascript">
    var selObj = [document.getElementById("sel1"),document.getElementById("sel2"),document.getElementById("sel3"),document.getElementById("sel4"),
    document.getElementById("sel5"),document.getElementById("sel6"),document.getElementById("sel7"),document.getElementById("sel8")];
    
    var menu   = [new SelectOption('1','one','1','0'),new SelectOption('2','two','2','0'),new SelectOption('3','three','3','0'),
                  new SelectOption('1_1','one_1','11','1'),new SelectOption('1_2','one_2','12','1'),new SelectOption('1_3','one_3','13','1'),new SelectOption('1_4','one_4','14','1'),
                  new SelectOption('2_1','two_1','21','1'),new SelectOption('2_2','two_2','22','1'),new SelectOption('two_3','one_3','23','1'),
                  new SelectOption('1_1_1','one_1_1','111','2'),new SelectOption('1_1_2','one_1_2','112','2'),new SelectOption('1_1_3','one_1_3','113','2'),
                  new SelectOption('2_1_1','2_1_1','211','2'),new SelectOption('2_1_2','2_1_2','212','2'),new SelectOption('2_1_3','2_1_3','213','2'),
                  new SelectOption('1_1_1_1','one_1_11','1111','3'),new SelectOption('1_1_1_2','one_1_21','1112','3'),
                  new SelectOption('1_1_2_1','one_1_21','1121','3'),new SelectOption('1_1_2_2','one_1_21','1122','3'),
                  new SelectOption('1_1_2_1_1','one_1_211','11211','4'),new SelectOption('1_1_2_1_2','one_1_212','11212','4'),new SelectOption('1_1_2_1_3','one_1_213','11213','4'),
                  new SelectOption('1_1_2_1_1_1','one_1_2111','112111','5'),new SelectOption('1_1_2_1_1_2','one_1_2112','112112','5'),
                  new SelectOption('1_1_2_1_1_2_1','one_1_21121','112111','6'),new SelectOption('1_1_2_1_1_2_2','one_1_21122','112112','6'),
                  new SelectOption('1_1_2_1_1_2_1_1','one_1_211211','1121111','7'),new SelectOption('1_1_2_1_1_2_1_2','one_1_211212','1121112','7')                
                  ]   
     cds = new ConnDownSelect(selObj,menu,"");
     cds.init(); 
</script>