Sobald Select-Boxen eine große Anzahl an Optionen haben geht die Übersicht und die Bedienbarkeit verloren. Ebenfalls kann es vorkommen, dass die möglichen Optionen von Select-Boxen von vorher ausgewählten Select-Boxen abhängig sind. Somit wäre es schön, wenn an der ersten Select-Box z.B. eine Hauptkategorie ausgewählt wird und die zweite Select-Box für Unterkategorien dynamisch auf Grund der vorher ausgewählten Hauptkategorie gefüllt wird.

Beispiel

Beispiel

Demo

Hier kommt JQuery mit seinen AJAX-Möglichkeiten ins Spiel.

<script type="text/javascript">
  $(document).ready(function() {
      $("#selectbox_1").change(function(){
        var id_hauptkategorie=$(this).children('option:selected').val();
        $("#selectbox_2").load("selectboxen.php",{value: id_hauptkategorie});
      });
  });
</script>

Als Erstes wird der Select-Box zum Auswählen einer Hauptkategorie („#selectbox_1“) beim onChange die nachfolgenden Funktion zugewiesen. In Zeile 4 wird der aktuelle Status der Hauptkategorie-Wahl in einer Variablen („value“) gespeichert.

In der fünften Zeile erfolgt dann der eigentliche Aufruf bzw. das Füllen der zweiten Select-Box („#selectbox_2“). Es wird die Select-Box mit der ID „#selectbox_2“ mit dem Inhalt aus dem Aufruf der PHP-Seite „selectboxen.php“ gefüllt. Als Parameter wird der PHP-Seite die Variable „value“, die als Inhalt die ID der Hauptkategorie hat, übergeben.

Die PHP-Seite liefert dann abhängig des übergebenen Parameters unterschiedlichen HTML-Quellcode zurück, der dann in der zweiten Select-Box angezeigt wird.

<?php
  if($_POST["value"]==1){
?>
    <option value="1">Auto</option>
    <option value="2">LKW</option>
    <option value="3">Motorrad</option>
<?  }
elseif($_POST["value"]==2){
?>
    <option value="1">Banane</option>
    <option value="2">Apfel</option>
    <option value="3">Erbse</option>
<?
}else {
  ?>
    <option value="1">PC</option>
    <option value="2">Laptop</option>
    <option value="3">MAC</option>
<?
}
?>

Die PHP-Seite kann natürlich den eigenen Bedürfnissen angepasst werden und mit notwendigen Datenbankabfragen etc. aufgebohrt werden. Das Grundprinzip zum dynamischen Laden von Selectboxen sollte aber mit diesem Beispiel recht gut verdeutlich werden.