Disable/Hide optgroup in selectbox JavaScript

[Verwijderd]

Het is misschien een beetje lastig uit te leggen, maar ik heb een probleem met een formulier waarin een aantal verschillende optgroups aanwezig zijn.

De bedoeling is, dat als ik in selectie 1 een item uit (bijvoorbeeld) optgroup 1 selecteer, ik dan in selectie 2 niet nogmaals uit optgroup 1 een item kan selecteren.

Ik heb me al 5 uur rotgezocht en ik kan nergens een oplossing voor mijn probleem vinden. Zelf ben ik er ook nog niet uit.

Hieronder (een gedeelte van) mijn formulier:

HTML:

<form action="" type="post">
<label id="selk1label" for="selk1">Klasse 1:</label>
    <select id="selk1">
        <option selected="selected" disabled="disabled" value="">--------------- Kies een optie --------------</option>
     <optgroup id="k1optgchassis" label="Chassis:">
        <option value="k1team1chassis">Red Bull</option>
        <option value="k1team2chassis">McLaren</option>
        <option value="k1team3chassis">Ferrari</option>
     </optgroup>
     <optgroup id="k1optgmotor" label="Motor:">
        <option value="k1team1motor">Red Bull</option>
        <option value="k1team2motor">McLaren</option>
        <option value="k1team3motor">Ferrari</option>
     </optgroup>
     <optgroup id="k1optgcoureur1" label="Coureurs, Red Bull:">
        <option value="k1team1coureur1">Vettel</option>
        <option value="k1team1coureur2">Webber</option>
     </optgroup>
     <optgroup id="k1optgcoureur2" label="Coureurs, McLaren:">
        <option value="k1team2coureur1">Hamilton</option>
        <option value="k1team2coureur2">Button</option>
     </optgroup>
     <optgroup id="k1optgcoureur3" label="Coureurs, Ferrari:">
        <option value="k1team3coureur1">Alonso</option>
        <option value="k1team3coureur2">Massa</option>
     </optgroup>
     </select>
<label id="selk2label" for="selk2">Klasse 2:</label>
    <select disabled="disabled" id="selk2">
        <option selected="selected" disabled="disabled" value=""> -- Kies eerst een optie uit klasse 1 --</option>
     <optgroup id="k2optgchassis" label="Chassis:">
        <option value="k2team1chassis">Mercedes</option>
        <option value="k2team2chassis">Renault</option>
        <option value="k2team3chassis">Williams</option>
     </optgroup>
     <optgroup id="k2optgmotor" label="Motor:">
        <option value="k2team1motor">Mercedes</option>
        <option value="k2team2motor">Renault</option>
        <option value="k2team3motor">Williams</option>
     </optgroup>
     <optgroup id="k2optgcoureur1" label="Coureurs, Mercedes:">
        <option value="k2team1coureur1">Schumacher</option>
        <option value="k2team1coureur2">Rosberg</option>
     </optgroup>
     <optgroup id="k2optgcoureur2" label="Coureurs, Renault:">
        <option value="k2team2coureur1">Heidfeld</option>
        <option value="k2team2coureur2">Petrov</option>
     </optgroup>
     <optgroup id="k2optgcoureur3" label="Coureurs, Williams:">
        <option value="k2team3coureur1">Barrichello</option>
        <option value="k2team3coureur2">Maldonado</option>
     </optgroup>
     </select>
</form>

Welterusten,

Hugo.

[Bosmonster]

Helaas is dit extreem buggy cross-browser. Zo heeft Webkit al jaren een bug dat je niet dynamisch options in een select kunt hiden.

Maar wat heb je zelf al geprobeerd, ik zie namelijk geen code. Gebruik je een framework zoals jQuery?

[Verwijderd]

Nee ik heb zelf nog niet zoveel verstand van programmeren/coderen maar ik heb al verschillende functies geprobeerd waarbij ik .disable=true aanroep. Dat lijkt op een optgroup echter niet te werken.

Aangezien ik zelf nog niet zo handig ben met javascript zouden tips en algemene truucs erg welkom zijn

[StephanVierkant]

Kun je wat precieser aangeven wat je al hebt geprobeerd?

[Verwijderd]

zoiets als dit bijvoorbeeld:

JavaScript:

function disableoptgroup(groupid) {
    if (condition) {document.getElementById(groupid).disabled=true } }

[mithras]

En wat als je de volgende selectie pas aanmaakt op het punt dat je een eerste selectie hebt gedaan? Of de tweede selectie opnieuw opbouwt wanneer je een eerste selectie hebt gedaan?

[Verwijderd]

@ Mithras, daar had ik nog niet aan gedacht. Ik zal daar eens wat meer info over zoeken. Kun je me misschien een sleutelwoord geven waar ik op kan zoeken?

[Verwijderd]

Ik ga voor een andere aanpak denk ik.

In plaats van dat gehannes met optgroups wil ik gewoon twee selectboxes naast elkaar zetten. In de eerste wordt dan gekozen voor een categorie, en aan de hand daarvan worden in de tweede selectbox de bijbehorende keuzes weergegeven.

Wat ik dan ook nog wil, is dat als een categorie geselecteerd is in de eerste selectbox, deze voor een 3e selectbox met dezelfde categorieen uitgeschakeld/verwijderd is.

[Bosmonster]

Dat laatste wordt dus lastig crossbrowser, tenzij je de hele selectbox opnieuw opbouwt.

[tonyisgaaf]

Zoek eens op "cascading" of "dependent" select(s).
Bosmonster heeft gelijk dat het minder foutgevoelig is <select> helemaal opnieuw op te bouwen dan de bestaande te manipuleren.
Overigens: waarom 2 selects met dezelfde opties? Klinkt alsof je wellicht de UI nog kunt bijschaven.

[Verwijderd]

Heb gedaan wat Bosmonster zei: het hele lijstje gekloond en met de gewenste opties opnieuw opgebouwd zodra er in het eerste selectboxje een keuze is gemaakt.

Werkt goed.

Heb het voorbeeld hier gebruikt: KLIK!

[Verwijderd]

Vreemd: Als ik dat voorbeeld probeer uit te breiden naar meerdere selectboxen, dan krijg ik het wel werkend in FF (zoals altijd....) maar niet in IE ....

Ik kan hier plaatsen wat ik geschreven heb, is iemand er benieuwd naar?

[Bosmonster]

Als je zelf benieuwd ben naar een oplossing