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

We zoeken freelance frontenders. Interesse? Stuur me een berichtje!


  • orf
  • Registratie: augustus 2005
  • Laatst online: 16:25
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?

We zoeken freelance frontenders. Interesse? Stuur me een berichtje!


  • orf
  • Registratie: augustus 2005
  • Laatst online: 16:25
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%)

We zoeken freelance frontenders. Interesse? Stuur me een berichtje!


  • orf
  • Registratie: augustus 2005
  • Laatst online: 16:25
Tijd voor een boek?
:P

We zoeken freelance frontenders. Interesse? Stuur me een berichtje!

Pagina: 1


OnePlus 7 Pro (8GB intern) Nintendo Switch Lite LG OLED C9 Google Pixel 3a XL FIFA 19 Samsung Galaxy S10 Sony PlayStation 5 Smartphones

'14 '15 '16 '17 2018

Tweakers vormt samen met Tweakers Elect, Hardware Info, Autotrack, Nationale Vacaturebank, Intermediair en Independer de Persgroep Online Services B.V.
Alle rechten voorbehouden © 1998 - 2019 Hosting door True