Dynamisches Drop Down Formular

Tobai · 15. Januar 2008

Hallo zusammen,

ich bin gerade dabei ein dynamisches Drop Down Formnular zu erstellen.

Leider bin ich an einem Punkt angelangt an dem ich nicht mehr weiter weis.

Ich möchte, dass das Formular aus mehreren Feldern besteht die voneinander abhängig sind.

Die verknüpfung zwischen dem ersten und dem zweiten Select habe ich noch hinbekommen. Leider funktioniert die Abhängigkeit bei dritten Select nicht mehr.

Hier mein bisheriges Script:

<script language="Javascript">

</script>

<form name="verzeichnis">
<p>
<select size="1" name="kategorie" onchange="update_auswahl()">
<option value="T-Shirt" selected>T-Shirt</option>
<option value="Poloshirt">Poloshirt</option>
</select>
<select size="1" name="unterkategorie">
<option selected>Rundhals</option>
<option>V-Neck</option>
</select>
<select size="1" name="unterkategorie2">
<option selected>rot</option>
<option>grün</option>
<option>blau</option>
<option>gelb</option>
</select>
</p>
</form>

Könnt ihr euch das bitte mal anschauen und mir evt. weiterhelfen wie ich mein Script verfollständigen muss, dass auch das dritte Feld in Abhängigkeit von den Auswahlen im zweiten Select funktioniert.

Hier sollte man beim "Rundhals" ausschließlich die Farben grün und rot und beim "V-Neck" die Farben blau und gelb auswählen können.

Vielen Dank für eure Antworten.

MfG
Tobai

FipsTheThief · 16. Januar 2008

Naja auf die Schnelle würde ich das nun so machen , habe dein Script mal nen wenig abgeändert , aber so zufrieden bin ich damit auch noch nicht das ist mir alles zu sehr im Quelltext rein codiert.

Code:

<html>
<head><script language="Javascript">
<!-- Start
function update_auswahl(evt)
{
    var evt = (evt)?evt:(window.event)?window.event:'';
    var tar = evt.srcElement || evt.target; // Welches feld wurde verändert
    /* da wird das nächste Select Feld gespeichert was
     * nach dem aktuellen Select Feld kommt
     */
    var nextSF = null;
    
    /*
     * den nächsten Knoten suchen welcher nicht #text ist somit das SelectFeld
     * was nach dem aktuellen SelectFeld kommt
    */
    do {
        nextSF = (nextSF)?nextSF.nextSibling:tar.nextSibling;
    } while (nextSF.nodeName == '#text');
        
    // das nachfolgende SelectFeld leeren
    nextSF.options.length = 0;
                
    // aktuelles SelectFeld vom namen 
    if(tar.name == 'kategorie') {
        /*
         * den aktuell ausgewählten Wert durchforsten  
         * und die Optionen zuweisen
         */
        switch (tar.value.toLowerCase()) {
            case 't-shirt': 
                nextSF.options[0] = new Option('Rundhals');
                nextSF.options[1] = new Option('V-Neck');
            break;
            case 'poloshirt':
                nextSF.options[0] = new Option('mit Knopfleiste');
                nextSF.options[1] = new Option('ohne Knopfleiste');
            break;
        }
    } else {
        //  für den IE extra diese Änderung der kommt sonst nicht an den Inhalt ran -.- Drecksbrowser
        for(var i = 0 ; i < tar.childNodes.length;i++) {
            if(tar.childNodes[i].nodeName != '#text' && 
               tar.childNodes[i].getAttribute('selected')) {
                var curOption = tar.childNodes[i].innerHTML;
                break;
            }
        }
        
        switch(curOption.toLowerCase()) {
            case 'rundhals':
                nextSF.options[0] = new Option('leukoplastRosa');
                nextSF.options[1] = new Option('orange');
                nextSF.options[2] = new Option('fitgrün');
            break;
            case 'v-neck':
                nextSF.options[0] = new Option('schwarz');
                nextSF.options[1] = new Option('rosa');
                nextSF.options[2] = new Option('bulette');
            break;
            case 'mit knopfleiste':
                nextSF.options[0] = new Option('malwe');
                nextSF.options[1] = new Option('ocker');
                nextSF.options[2] = new Option('weiß');
            break;
            case 'ohne knopfleiste':
                nextSF.options[0] = new Option('schwarz');
                nextSF.options[1] = new Option('orange');
                nextSF.options[2] = new Option('rot');               
                nextSF.options[3] = new Option('blau');               
            break;
        }
    }
}

window.onload = function () {
    var select = document.verzeichnis.getElementsByTagName('SELECT');
    
    // alle selectfelder durchlaufen das letzte lassen wir aus brauchen wir ja nicht
    // und events drauf legen
    for(var i = 0 ; i < select.length-1;i++) {
        if(document.addEventListener) {
            select[i].addEventListener('change',update_auswahl,false);
        } else {
            select[i].attachEvent('onchange',update_auswahl);
        }
    }
}
// Ende -->
</script>

<form name="verzeichnis">
<p>
<select size="1" name="kategorie">
<option value="T-Shirt" selected>T-Shirt</option>
<option value="Poloshirt">Poloshirt</option>
</select>
<select size="1" name="unterkategorie">
<option selected>Rundhals</option>
<option>V-Neck</option>
</select>
<select size="1" name="unterkategorie2">
<option selected>rot</option>
<option>grün</option>
<option>blau</option>
<option>gelb</option>
</select>
</p>
</form>
</body></html>

An der Switch Case wird man denk ich schnell erkennen das es gut anwachsen wird wenn alles so statisch reingehaun wird an Optionen. da könnte man Eventuell noch mit Arrays arbeiten um sich Farbkombinationen zu speichern. Wird zwar nen großes Array eventuell am Ende aber immer noch besser als 200 Zeilen mit Switch Case voll zu ballern

.

Dynamisches Drop Down Formular

Tobai

Grünschnabel

FipsTheThief

Erfahrenes Mitglied

Neue Beiträge