Twee selectboxen zien er als volgt uit:

Code:

<select class="selectboxA" id="selectboxA">
   <option value="30">optie 1</option>
   <option value="32">optie 2</option>
   <option value="33">optie 3</option>
</select>

<select class="selectboxB" id="selectboxB">
  <option class="33" value="1">A1</option>
  <option class="33" value="2">A2</option>
  <option class="32" value="6">B1</option>
  <option class="32" value="7">B2</option>
  <option class="30" value="17">C1</option>
  <option class="30" value="26 30">C2</option>
</select>

Als er een keuze is gemaakt in selectboxA moeten in selectboxB alleen de bijbehorende opties overblijven. Klik je dus bijv. op "optie 2" dan blijven in selectboxB de mogelijkheden B1 en B2 over. Dat heb ik werkend met deze code:

Code:

$a('.selectboxB > option').not('[class="' + id + '"]').remove();

Maar die verwijdert de andere opties, in plaats van onzichtbaar te maken. Als je in selectboxA op "optie 3" klikt gebeurt er dus niks.
Hoe maakt ik de opties in selectboxB onzichtbaar in plaats van ze te verwijderen?

Je gebruikt idd de Jquery remove-functie.
Kan je de hide-functie hiervoor niet toepassen?

Dus:

Code:

$a('.selectboxB > option').not('[class="' + id + '"]').hide();

Hier misschien wat interessant leesvoer: http://stackoverflow.com/questions/1...t-using-jquery

Dat is inderdaad de oplossing. Ik was zo gefocust op een andere oplossing dat ik helemaal niet aan hide() had gedacht.