lightbox+checkbox实现轻量级联动选择

Showbo.PopSel={
  maxItem:6,//最多选择的项
  itemNum:0,//已经选择了多少项
  fs:null,//fieldset集合
  ld:null,//legend集合
  sel:null,//第一个lengend中的select对象
  sp:null,//checkbox的容器
  b:null,//大类数组
  s:null,//小类数组
  dpstr:null,//显示的内容
  bobj:null,//接受大类值的hidden对象
  sobj:null,//接受小类值的hidden对象
  dpobj:null,//显示选择大类【如果未选择小类】或者小类的显示值
  selv:0,//select初始化时的值
  isOne:false,//是否为只有一级选择。
  tmpHTML:'<div id="dvSelPop"><fieldset class="selpop"><legend><label></label><select onchange="Showbo.PopSel.sm(this.value)"></select></legend><span></span><div class="clear"></div>'
  +'</fieldset><br/><br/><fieldset class="selpop"><legend></legend><span></span><div class="clear"></div></fieldset></div>',//mgbox的模板内容
  setVal:function(){//设置内容
    var cb=Showbo.$s(this.sp[1],'input'),sIds='',sStr='',bStr=this.isOne?'':this.sel.options[this.sel.selectedIndex].text;
    for(var i=0;i<cb.length;i++){
      sIds+=(sIds==''?'':',')+cb[i].value;
      sStr+=(sStr==''?'':'，')+bStr+cb[i].nextSibling.data;
    }
    if(this.isOne)this.bobj.value=sIds;
    else{this.bobj.value=this.sel.value;this.sobj.value=sIds;}
    this.dpobj.value=sStr==''?bStr:sStr;
  },
  pop:function(b,s,btl,stl,bobj,sobj,dpobj,binit){
    this.b=b;this.s=s;this.bobj=bobj;this.sobj=sobj;this.dpobj=dpobj;
    this.isOne=s?false:true;
    Showbo.Msg.show({title:btl,msg:this.tmpHTML,buttons:{yes:'确定',no:'取消'},width:600,fn:function(btn){if(btn=='yes')Showbo.PopSel.setVal();}});    
    var dvp=Showbo.$('dvSelPop');
    this.fs=Showbo.$s(dvp,'fieldset');this.ld=Showbo.$s(dvp,'legend');this.sel=Showbo.$s(this.ld[0],'select')[0];this.sp=Showbo.$s(dvp,'span');
    if(/^\d+$/.test(bobj.value))binit=parseInt(bobj.value,10);
    this.selv=binit;    
    if(this.isOne){this.sel.style.display='none';this.ld[0].firstChild.innerHTML='选项列表';}
    else{
      Showbo.addOptions(this.sel,b,binit);
      this.sel.style.display='inline';
      this.ld[0].firstChild.style.display='none';
    }
    this.ld[1].innerHTML=stl;    
    this.sm(binit,true);
    Showbo.Msg.onResize();//重新设定MsgBox的位置
  },
  CK:function(e,isSelected){
    var cobj=e.srcElement||e.target;
    if(cobj.tagName=='LABEL'){
      Showbo.cancelEvent(e);
      cobj=cobj.firstChild;
      cobj.checked=!cobj.checked;
    }
    if(cobj.checked){
      if(this.itemNum<this.maxItem){
        this.itemNum++;
      }
      else{
        alert('最多能选择'+this.maxItem+'项！');      
        Showbo.cancelEvent(e);
        cobj.checked=false;
        return false;
      }
    }
    else this.itemNum--;
    var cb1=Showbo.$s(this.sp[0],'input'),cb2=Showbo.$s(this.sp[1],'input');
    if(isSelected){
      for(var i=0;i<cb1.length;i++)if(cb1[i].value==cobj.value){cb1[i].checked=false;break;}
      this.sp[1].removeChild(cobj.parentNode.parentNode);
    }
    else{
      if(cobj.checked)this.sp[1].innerHTML+='<div><label onclick="Showbo.PopSel.CK(event,true)"><input type="checkbox" value="'+cobj.value+'" checked/>'+cobj.nextSibling.data+'</label></div>';
      else for(var i=0;i<cb2.length;i++)if(cb2[i].value==cobj.value){this.sp[1].removeChild(cb2[i].parentNode.parentNode);break;}
    }
  },
  sm:function(v){
    var obj=this.isOne?this.bobj:this.sobj;
    if(this.selv==v)this.itemNum=obj.value==''?0:obj.value.split(',').length;
    else this.itemNum=0;
    var arr=this.isOne?this.b:this.s['k'+v],html='',selHtml='',SV=','+obj.value+',',cked='';
    for(var i=0;i<arr.length;i++){
      cked=SV.indexOf(','+arr[i].v+',')!=-1?' checked':'';
      html+='<div><label onclick="Showbo.PopSel.CK(event)"><input type="checkbox" value="'+arr[i].v+'"'+cked+'/>'+arr[i].t+'</label></div>';
      if(cked!='')selHtml+='<div><label onclick="Showbo.PopSel.CK(event,true)"><input type="checkbox" value="'+arr[i].v+'" checked/>'+arr[i].t+'</label></div>';
    }
    this.sp[0].innerHTML=html;
    this.sp[1].innerHTML=selHtml;
  }
};
//样式
document.write('<style type="text/css">fieldset.selpop{width:95%;margin:0% auto;padding:0px;margin:0px;}'
    +'fieldset.selpop div{width:30%;float:left;line-height:25px;padding-left:10px;}'
    +'fieldset.selpop div.clear{clear:both;line-height:1px;overflow:hidden;height:auto !important;height:1px;}</style>');