abhängige Listen

In einem Formular sollen neben mehreren anderen Eingabefeldern auch zwei Listen (Select-Felder) zum Einsatz kommen. Dabei soll der Inhalt der zweiten Liste vom gewählten Wert der ersten Liste abhängig verändert werden.

Beispiel:
Die erste Liste enthält verschiedene Artikelgruppen (z.B. Monitore, Festplatten usw) und die zweite Liste die entsprechenden Produkte (120GB, 160 GB usw...).

Zur Realisierung mit reinem HTML/PHP wäre eine Verarbeitung des Formulars nach jeder Änderung der ersten Liste erforderlich, damit die zweite Liste neu erstellt werden kann. Hierbei gehen jedoch sämtliche weiteren Eingaben in anderen Formularfeldern ebenfalls verloren, bzw. müssten wieder in die Felder geschrieben werden. Außerdem tritt eine Unterbrechung für den User ein. Im folgenden Beispiel soll eine Lösung mit JavaScript vorgestellt werden. JavaScript stellt kein unmittelbares Sicherheitsrisiko dar und kann daher ohne Bedenken eingesetzt werden. Surfer, die Javascript in ihrem Browser deaktiviert haben, können mit einer geeigneten Meldung auf die Unbedenklichkeit hingewiesen werden. Die verwendeten Befehle sollten son allen gängigen Browsern unterstützt werden.

Für das Beispiel benötigen wir zunächst zwei Tabellen - eine mit Artikelgruppen und eine mit den Artikeln selbst.

tbl_art_gruppen

art_grp_id int
art_gruppe varchar(30)

und tbl_artikel

art_id int
art_bez varchar(30)
art_grp int

Zunächst erzeugen wir eine Seite mit einem Formular und einem Select-Feld. Den Wert des Select-Feldes schreiben wir aus der Tabelle tbl_art_gruppen

<form name="frm_auswahl">
    <select name="drp1" size="1">
    <?php
        $rs=mysql_query("select * from tbl_art_gruppe");
        while($zeile=mysql_fetch_assoc($rs)) {
            echo "<option value="".$zeile['art_grp_id']
            . "">".$zeile['art_gruppe']."</option>n";
        }
    ?>
    </select>

Danach erstellen wir die abhängige Liste mit einem Startwert.

    <select name="drp2" size="1">
        <option>Start</option>
    </select>

Nach Abschluss des Formulars wird ein JavaScript-Bereich eingefügt um der zweiten Liste die entsprechenden Werte zu verpassen.

</form>
<script type="text/javascript">
<!--
    update_drp2()
-->
</script>

Die entsprechende Funktion und eine dazugehörige Wertliste wird im Head-Bereich der Seite erstellt:

<script type="text/javascript">
<!--
<?php
// abhängiges Kombifeld erzeugen
    $rs=mysql_query" select * from tbl_artikel;");
    $rows=mysql_num_rows($rs);
    echo "tvar liste2=new Array($rows)n"
    . "tfor(var i=0;i<liste2.length;i++)n"
    . "ttliste2[i]=new Array(2);n";
    $n=0;
    while($zeile=mysql_fetch_assoc($rs)) {
        echo "tliste2[$n][0]=".$zeile['art_id'].";n"
        . "tliste2[$n][1]='".$zeile['art_bez']."';n"
        . "tliste2[$n][2]=".$zeile['art_grp'].";n";
        $n++;
    }
?>
function update_drp2() {
    var x=document.frm_auswahl.drp2.length;
    for(var n=0; n<x; n++)
        document.frm_auswahl.drp2.options[0]=null;
    for(n=0; n<liste2.length; n++) {
        if(liste2[n][2]==document.frm_auswahl.drp1.value) {
            var NeuerEintrag=new Option(liste2[n][1], liste2[n][0]);
            document.frm_auswhal.drp2.options[document.frm_auswahl.drp2.length]=NeuerEintrag;
        }
    }
}
-->
</script>
</head>

Damit auch wirklich was passiert, müssen wir jetzt noch der Liste 'drp1' ein Ereignis zuweisen. Der neue Eintrag für die erste Liste sollte dann so aussehen:

<select name="drp1" size="1" onChange="update_drp2()">

Wie funktioniert es? Zuerst wird der komplette Inhalt für die abhängige Liste im JavaScript-Bereich in ein Array geschrieben. Die Funktion 'update_drp2' löscht zuerst alle Einträge (Optionen) der Liste. Im zweiten Schritt wird das zuvor erzeugte Array durchlaufen und die dritte Spalte (Verweis auf die Artikelgruppe) mit dem Optionswert der Liste1 verglichen (=Abhängigkeit!) Stimmen die beiden Werte überein wird der Liste2 eine neue Option zugefügt.

Diese Funktionen stammen von SELFHTML und sind dort ausführlich erläutert.

Zum Schluss noch ein Beispiel für die Inhalte der Tabellen:

tbl_art_gruppen:

art_grp_id art_gruppe
1 Monitore
2 Festplatten

tbl_artikel:

art_id art_bez art_grp
1 17 Zoll 1
2 19 Zoll 1
3 120 GB 2
4 160 GB 2

Erfahrungen

Es sind noch keine Kommentare vorhanden.

Hier Kannst Du einen Kommentar verfassen


Bitte gib mindestens 10 Zeichen ein.
Wird geladen... Bitte warte.
* Pflichtangabe

Verwandte Beiträge

Webseite empfehlen

PHP ermöglicht es dem Besucher mit Hilfe der eigenen mail() Funktion mit wenig Aufwand die eigene Webseite Bekannten oder Freunden weiterzuempfehlen ...

Lukas Beck

Autor : Lukas Beck
Kategorie: PHP-Tutorials

PHP-Scripte offline testen unter Windows

Wenn Sie sich schon mit der Erstellung von dynamischen Websiten beschäftigt haben, wissen Sie vielleicht wie umständlich es ist, die Scripte immer auf den Server Ihres Hosters zu laden um diese testen zu können. ...

webmaster116@

Autor : webmaster116@
Kategorie: Linux & Server Tutorials

Gewichtete SQL-Abfragen

Gewichtete Abfragen werde häufig im Banner-Umfeld benötigt. Also überall da, wo Banner nach bestimmten Kriterien einblendet werden sollen. Wenn man davon ausgeht, das Banner unterschiedlichen Klick-Erfolg haben, dann liegt der Gedanke nahe, genau diese Ba ...

admin

Autor : admin
Kategorie: mySQL-Tutorials

Programmierung - SQL

Dieser SQL-Kurs wendet sich vor allem an Programmierer, die mit Hilfe von SQL auf Datebaken zugreifen, und an alle, die Datenbanken neu entwerfen, erweitern oder abändern wollen ...

webmaster205@

Autor : webmaster205@
Kategorie: mySQL-Tutorials

Wie schreibt man ein Forum mit PHP und Mysql

Wie schreibt man ein Forum mit PHP und Mysql

Wie erstellt man ein kleines Forum mit PHP und MYSQL? Dieses Tutorials zeigt wie es geht ...

Moqui

Autor : Moqui
Kategorie: PHP-Tutorials

Umfragenscript

Dieses Tutorial zeigt wie man mit eine Umfragescript mit einen TXT-Datenbank erstellen kann. ...

kiliandreissig@

Autor : kiliandreissig@
Kategorie: PHP-Tutorials

Was muss ich in WordPress einstellen, damit Google Fonts nicht mehr geladen werden?

Möchten Du WordPress davon abhalten, Google Fonts zu verwenden? Hier erfährst Du, was du dafür in WordPress einstellen musst. ...

admin

Autor : admin
Kategorie: Sonstige Tutorials

Tutorial veröffentlichen

Tutorial veröffentlichen

Teile Dein Wissen mit anderen Entwicklern weltweit

Du bist Profi in deinem Bereich und möchtest dein Wissen teilen, dann melde dich jetzt an und teile es mit unserer PHP-Community

mehr erfahren

Tutorial veröffentlichen