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: 23:16
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%)


  • orf
  • Registratie: augustus 2005
  • Laatst online: 23:16
Aha! thanks!

Nieuw gevonden probleempje in IE
Als in de select al een option selected is, dan zet IE wel de background color, maar niet het vinkje in de checkbox, Firefox zet 'm wel gewoon.
code:
1
checkbox.checked = true;

Dit lijkt me ok?

  • orf
  • Registratie: augustus 2005
  • Laatst online: 23:16
Poehee, super!
Het is bijna eng wat ik je op dit forum als reply zie geven :)

edit: OP edited met werkende code.

orf wijzigde deze reactie 27-05-2006 23:16 (20%)


  • orf
  • Registratie: augustus 2005
  • Laatst online: 23:16
Tijd voor een boek?
:P
Pagina: 1


Apple iPhone 11 Microsoft Xbox Series X LG OLED C9 Google Pixel 4 CES 2020 Samsung Galaxy S20 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