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); |
---|