Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

[JS] dynamische labels werken niet in IE?

Pagina: 1
Acties:

  • orf
  • Registratie: augustus 2005
  • Laatst online: 22:59
Ik probeer een multiselect (<select multiple="multiple">), met JavaScript om te zetten naar een iets gebruiksvriendelijker iets, namelijk een divje met daarin checkboxes. Dat heb ik wel werkend, maar de labels die ik gebruik voor de checkboxes werken niet in IE. Iemand een idee hoe ik dat werkend kan krijgen?
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function convertMultiSelect(){ 
    var aSelects = document.getElementsByTagName('select'); 
    for (var i=0; i < aSelects.length; i++){ 
        if (aSelects[i].multiple){ 
            var div             = document.createElement('div'); 
            div.style.width      = aSelects[i].offsetWidth; 
            div.style.height     = aSelects[i].offsetHeight; 
            div.style.border    = '1px solid #ccc'; 
            div.style.overflow     = 'auto'; 
            var options = aSelects[i].options; 
            for (j=0; j < aSelects[i].length; j++){ 
                var id      = aSelects[i].name.replace(/\[\]$/,'') + j;  
                var label = document.createElement('label'); 
                label.style.display = 'block'; 
                label.style.width = '100%'; 
                label.style.borderTop = '1px solid #eee'; 
                label.setAttribute('htmlFor', id);                 
                var checkbox = document.createElement('input'); 
                checkbox.type  = 'checkbox'; 
                checkbox.name  = aSelects[i].name; 
                checkbox.value = aSelects[i].options[j].value; 
                checkbox.id    = id; 
                checkbox.onclick = function(){ 
                    if (this.checked){ 
                        this.parentNode.style.backgroundColor = '#DDDDDD'; 
                    } else { 
                        this.parentNode.style.backgroundColor = '#FFFFFF'; 
                    } 
                }; 
                if (aSelects[i].options[j].selected){ 
                    checkbox.defaultChecked = true; 
                    label.style.backgroundColor = '#DDDDDD'; 
                } 
                 
                var labeltext  = document.createTextNode(aSelects[i].options[j].text); 
                label.appendChild(checkbox); 
                label.appendChild(labeltext); 
                div.appendChild(label); 
            } 
            aSelects[i].parentNode.replaceChild(div, aSelects[i]); 
        } 
    } 
} 
onload = convertMultiSelect;

orf wijzigde deze reactie 27-05-2006 23:15 (45%)

Pagina: 1


Apple iPhone 11 Microsoft Xbox Series X LG OLED C9 Google Pixel 4 CES 2020 Samsung Galaxy S20 4G Sony PlayStation 5 Nintendo Switch Lite

'14 '15 '16 '17 2018

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2020 Hosting door True