Für ein aktuelles Projekt wurden abhängige Select-Boxen benötigt.
Das heisst, in der ersten Box sollte ein Vorauswahl selektiert werden, die zweite Box soll die entsprechenden Einträge dazu anzeigen und unnötige entfernen. Da nicht jedesmal ein Datenbankabfrage gestartet werden soll bietet sich hier jQuery mit etwas CSS optimal an.

<select id="s1">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<select id="s2" size="3">
    <option class="val_1" value="1/1">Option 1/1</option>
    <option class="val_1" value="1/2">Option 2/1</option>
    <option class="val_2" value="2/1">Option 2/1</option>
    <option class="val_2" value="2/2">Option 2/2</option>
    <option class="val_2" value="2/3">Option 2/3</option>
    <option class="val_3" value="3/1">Option 3/1</option>
    <option class="val_3" value="3/2">Option 3/2</option>
</select>

Nach dem der Inhalt der ersten Box (#s1) sich geändert hat, werden die Inhalte der zweiten Box (#s2) gefiltert, wobei unnötige Einträge mittels entsprechender Klasse über “display: none” versteckt werden.

$('#s1').change(function() {
    var value = $(this).val();
    $('#s2 option').siblings().css('display', 'none');
    $(this).siblings('select').children('option').each(function() {
        if ($(this).hasClass('val_' + value)) {
            $(this).css('display', 'block')
        }
    });
});

Run this Code on jsFiddle