[JS] Optgroup dynamisch uitlezen

[Verwijderd]

Hallo,

Ik ben bezig om een crosselect iets inzichtelijker te maken met optgroups, je weet wel:

code:

<SELECT>
    <OPTGROUP LABEL="Alkaline Metals">
        <OPTION>Lithium (Li)</OPTION>
        <OPTION>Sodium (Na)</OPTION>
        <OPTION>Potassium (K)</OPTION>
    </OPTGROUP>
    <OPTGROUP LABEL="Halogens">
        <OPTION>Fluorine (F)</OPTION>
        <OPTION>Chlorine (Cl)</OPTION>
        <OPTION>Bromine (Br)</OPTION>
    </OPTGROUP>        
</SELECT>

Nu weet ik wel hoe ik dit dynamisch kan aanmaken:

code:

var optGroup = document.createElement('optgroup');
optGroup.label = 'dynamisch label';
myselect.appendChild(optGroup);

Maar nu is alleen het uitlezen een probleem, omdat die niet in myselect.options.length uit te lezen zijn.
Het probleem is namelijk dat na een actie in de crosselect de hele lijst wordt uitgelezen, het verplaatste option wordt verwijderd, en de lijst weer wordt opgebouwd. Hierbij blijven de optgroups gewoon staan en worden de options allemaal onderaan erin gezet.

De aanpak is dus de options per optgroup uit te lezen, maar de hamvraag is dus hoe? GOT search en Google bieden mij nog geen uitkomst.

[gorgi_19]

Javascript hoort in Webdesign & Graphics
Zie P&W FAQ - HTML / javascript /css, etc...

>> Webdesign & Graphics

[ Voor 14% gewijzigd door gorgi_19 op 14-09-2004 17:13 ]

[André]

Vraag de childNodes van de select op, dan zul je zien dat je er 2 krijgt (de optgroups), daarvan kun je dan ook weer de childNodes van opvragen (de options).

[ Voor 6% gewijzigd door André op 14-09-2004 17:15 ]

[Annie]

Andere optie: werk met getElementsByTagName() om de collecties te doorlopen.

code:

var deSelect = document.getElementById('deSelect');
var deOptgroups = deSelect.getElementsByTagName('OPTGROUP');

var eersteOptgroup = deOptgroups[0].getElementsByTagName('OPTION');