[10] | 1 | /* |
---|
| 2 | coded by Kae - kae@verens.com |
---|
| 3 | I'd appreciate any feedback. |
---|
| 4 | You have the right to include this in your sites. |
---|
| 5 | Please retain this notice. |
---|
| 6 | */ |
---|
| 7 | |
---|
| 8 | /* edit these variables to customise the multiselect */ { |
---|
| 9 | var show_toplinks=false; |
---|
| 10 | } |
---|
| 11 | |
---|
| 12 | /* global variables - do not touch */ { |
---|
| 13 | var isIE=window.attachEvent?true:false; |
---|
| 14 | var selectDefaults=[]; |
---|
| 15 | } |
---|
| 16 | function addEvent(el,ev,fn){ |
---|
| 17 | if(isIE)el.attachEvent('on'+ev,fn); |
---|
| 18 | else if(el.addEventListener)el.addEventListener(ev,fn,false); |
---|
| 19 | } |
---|
| 20 | function buildMultiselects(){ |
---|
| 21 | do{ |
---|
| 22 | found=0; |
---|
| 23 | a=document.getElementsByTagName('select'); |
---|
| 24 | for(b=0;b<a.length,!found;b++){ |
---|
| 25 | var ms=a[b]; |
---|
| 26 | if(ms==null)break; |
---|
| 27 | var name=ms.name.replace(/\[\]$/, ''); |
---|
| 28 | if(ms.multiple){ |
---|
| 29 | /* common variables */ { |
---|
| 30 | selectDefaults[name]=[]; |
---|
| 31 | var found=1,disabled=ms.disabled?1:0,width=ms.offsetWidth,height=ms.offsetHeight; |
---|
| 32 | if(width<120)width=120; |
---|
| 33 | if(height<60)height=60; |
---|
| 34 | } |
---|
| 35 | /* set up wrapper */ { |
---|
| 36 | var wrapper=document.createElement('div'); |
---|
| 37 | wrapper.style.width=width+"px"; |
---|
| 38 | wrapper.style.height=height+"px"; |
---|
| 39 | wrapper.style.position='relative'; |
---|
| 40 | wrapper.style.border="2px solid #000"; |
---|
| 41 | wrapper.style.borderColor="#333 #ccc #ccc #333"; |
---|
| 42 | wrapper.style.font="10px sans-serif"; |
---|
| 43 | if(disabled)wrapper.style.background='#ddd'; |
---|
| 44 | } |
---|
| 45 | if(show_toplinks){ /* reset, all, none */ |
---|
| 46 | wrapper.appendChild(newLink("javascript:"+(disabled?"alert('selection disabled')":"multiselect_selectall('"+name+"','checked');"),'all')); |
---|
| 47 | wrapper.appendChild(document.createTextNode(', ')); |
---|
| 48 | wrapper.appendChild(newLink("javascript:"+(disabled?"alert('selection disabled')":"multiselect_selectall('"+name+"','');"),'none')); |
---|
| 49 | wrapper.appendChild(document.createTextNode(', ')); |
---|
| 50 | wrapper.appendChild(newLink("javascript:"+(disabled?"alert('selection disabled')":"multiselect_selectall('"+name+"','reset');"),'reset')); |
---|
| 51 | } |
---|
| 52 | /* setup multiselect */ { |
---|
| 53 | newmultiselect=document.createElement('div'); |
---|
| 54 | newmultiselect.style.position='absolute'; |
---|
| 55 | newmultiselect.style.top=show_toplinks?'15px':'0'; |
---|
| 56 | newmultiselect.style.left='0'; |
---|
| 57 | newmultiselect.style.overflow='auto'; |
---|
| 58 | newmultiselect.style.width=(isIE?width-4:width)+"px"; |
---|
| 59 | newmultiselect.style.height=show_toplinks?height-(isIE?19:15)+"px":height+'px'; |
---|
| 60 | } |
---|
| 61 | c=ms.getElementsByTagName('option'); |
---|
| 62 | for(d=0;d<c.length;d++){ |
---|
| 63 | var label=document.createElement('label'); |
---|
| 64 | label.style.display="block"; |
---|
| 65 | label.style.border="1px solid #eee"; |
---|
| 66 | label.style.borderWidth="1px 0"; |
---|
| 67 | label.style.font="10px arial"; |
---|
| 68 | label.style.lineHeight="10px"; |
---|
| 69 | label.style.paddingLeft="20px"; |
---|
| 70 | checkbox=document.createElement('input'); |
---|
| 71 | checkbox.type="checkbox"; |
---|
| 72 | if(c[d].selected){ |
---|
| 73 | checkbox.checked="checked"; |
---|
| 74 | checkbox.defaultChecked=true; |
---|
| 75 | } |
---|
| 76 | if(c[d].disabled){ |
---|
| 77 | checkbox.disabled='disabled'; |
---|
| 78 | label.style.color='#666'; |
---|
| 79 | } |
---|
| 80 | selectDefaults[name][d]=c[d].selected?'checked':''; |
---|
| 81 | if(disabled)checkbox.disabled="disabled"; |
---|
| 82 | checkbox.value=c[d].value; |
---|
| 83 | checkbox.style.marginLeft="-16px"; |
---|
| 84 | checkbox.style.marginTop="-2px"; |
---|
| 85 | checkbox.name=ms.name; |
---|
| 86 | |
---|
| 87 | // escape the label |
---|
| 88 | var text=c[d].innerHTML; |
---|
| 89 | text=text.replace(/\ ?/g, ' '); |
---|
| 90 | text=text.replace(/\<?/g, '<'); |
---|
| 91 | text=text.replace(/\>?/g, '>'); |
---|
| 92 | |
---|
| 93 | labelText=document.createTextNode(text); |
---|
| 94 | label.appendChild(checkbox); |
---|
| 95 | label.appendChild(labelText); |
---|
| 96 | newmultiselect.appendChild(label); |
---|
| 97 | } |
---|
| 98 | wrapper.appendChild(newmultiselect); |
---|
| 99 | ms.parentNode.insertBefore(wrapper,ms); |
---|
| 100 | ms.parentNode.removeChild(ms); |
---|
| 101 | } |
---|
| 102 | } |
---|
| 103 | }while(found); |
---|
| 104 | } |
---|
| 105 | function multiselect_selectall(name,val){ |
---|
| 106 | var els=document.getElementsByTagName('input'),found=0; |
---|
| 107 | for(var i=0;i<els.length;++i){ |
---|
| 108 | if((els[i].name==name+'[]'||els[i].name==name)&&!els[i].disabled)els[i].checked=val=='reset'?selectDefaults[name][found++]:val; |
---|
| 109 | } |
---|
| 110 | } |
---|
| 111 | function newLink(href,text){ |
---|
| 112 | var e=document.createElement('a');e.href=href;e.appendChild(document.createTextNode(text));return e; |
---|
| 113 | } |
---|
| 114 | |
---|
| 115 | addEvent(window,'load',buildMultiselects); |
---|