[JS] dynamische labels werken niet in IE?

[orf]

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:

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;

[ Voor 45% gewijzigd door orf op 27-05-2006 23:15 ]

[crisp]

JavaScript:

label.setAttribute('htmlFor', id);

[orf]

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:

checkbox.checked = true;

Dit lijkt me ok?

[crisp]

JavaScript:

checkbox.defaultChecked = true;

[orf]

Poehee, super!
Het is bijna eng wat ik je op dit forum als reply zie geven

edit: OP edited met werkende code.

[ Voor 20% gewijzigd door orf op 27-05-2006 23:16 ]

[crisp]

Ik ben waarschijnlijk 1 van de 5 mensen op aarde die de complete DOM level 0 EcmaScriptBindings gememoriseerd heeft

[ Voor 6% gewijzigd door crisp op 27-05-2006 23:18 ]

[orf]

Tijd voor een boek?

[crisp]

Mwa, ik zou wel 10 boeken kunnen schrijven, maar gezien het feit dat het a) geen drol opbrengt en b) er al zoveel boeken zijn (waarvan de meerderheid onzin verkondigd, bad practices stimuleerd of gewoonweg tekort schiet) denk ik dat dat weinig zin heeft

[dossiewossie]

crisp schreef op zondag 28 mei 2006 @ 00:45:
Mwa, ik zou wel 10 boeken kunnen schrijven, maar gezien het feit dat het a) geen drol opbrengt en b) er al zoveel boeken zijn (waarvan de meerderheid onzin verkondigd, bad practices stimuleerd of gewoonweg tekort schiet) denk ik dat dat weinig zin heeft

Jammer

offtopic:
Aangezien ik net begonnen ben met javascript, zijn er boeken die je echt kan aanraden?
Bad practices spot ik echt niet in boeken, ik neem gewoon lekker klakkeloos alles over, want tjsa, het staat nu eenmaal in het boek, en het is niet voor niets geschreven denk ik dan onbewust.
Geen zin om dingen te leren die ik daarna weer met moeite moet afleren...

[crisp]

De enige boeken die ik eigenlijk aanraadt zijn referenceguides.
Het kunnen spotten van bad practices leer je niet uit een boek, daarvoor heb je gewoon jaren van programmeerervaring nodig en bouw je dus vanzelf wel op. Veel lezen, open staan voor alternatieven en zaken bediscusseren (zoals hier op het forum) helpen daarbij. Uiteindelijk ontwikkel je dan je eigen style wat - als het goed is - een mix is van allerlei good practices

[dossiewossie]

crisp schreef op zondag 28 mei 2006 @ 15:08:
De enige boeken die ik eigenlijk aanraadt zijn referenceguides.
Het kunnen spotten van bad practices leer je niet uit een boek, daarvoor heb je gewoon jaren van programmeerervaring nodig en bouw je dus vanzelf wel op. Veel lezen, open staan voor alternatieven en zaken bediscusseren (zoals hier op het forum) helpen daarbij. Uiteindelijk ontwikkel je dan je eigen style wat - als het goed is - een mix is van allerlei good practices

Ok, maar ik neem aan dat je het gebruik van boeken niet afraad?
Als ik namelijk een javascript tutorial zoek op internet, dan wordt ik daar meestal niet blij van. En in js van sites neuzen schiet voor mijn gevoel ook niet op, daar zit ook heel veel rotzooi bij.
Ik denk dat ik http://www.howtocreate.co.uk maar eens ga doorspitten, daar krijg ik wel een goed gevoel bij.