✔ Auswahlfeld in Abhängigkeit eines anderen Auswahlfeldes füllen

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

stehe vor einem gedanklichen Problem bei dem ich euere Hilfe bräuchte.

Ich möchte ein Formular machen in dem ich ein Drop-Down-Auswahlfeld habe mit 2 oder 3 Kategorieren.
Daneben habe ich ein zweites Dropdown mit 20-50 Unterkategorien je Katagorie.

Jetzt möchte ich, wenn man im Kategorie-Drop-Down die Kategorie 1 auswählt im Unterkategorie-Drop-Down dann auch nur die Unterkategorien der Kategorie 1 angezeigt werden. Selbes natürlich für alle anderen Kategorien.

Hat jemand eine Idee wie ich das lösen könnte?
Vielen Dank für eure Hinweise im voraus!
 
Also mein Vorschlag wäre folgender:
HTML: 
<html>
    <head>
        <script type="text/javascript">
            function wechsel(el) {
                document.getElementById("gr1").style.display = "none";
                document.getElementById("gr2").style.display = "none";
                document.getElementById("gr3").style.display = "none";
                document.getElementById(el.options[el.selectedIndex].value).style.display="block";
            }
        </script>
    </head>
    <body>
            <select onchange="wechsel(this)">
                <option value="gr1">GRUPPE 1</option>
                <option value="gr2">GRUPPE 2</option>
                <option value="gr3">GRUPPE 3</option>
            </select>
            <select id="sel2">
                <optgroup style="display:none;" id="gr1">
                    <option>GR1-A</option>
                    <option>GR1-B</option>
                </optgroup>
                <optgroup style="display:none;" id="gr2">
                    <option>GR2-A</option>
                    <option>GR2-B</option>
                </optgroup>
                <optgroup style="display:none;" id="gr3">
                    <option>GR3-A</option>
                    <option>GR3-B</option>
                </optgroup>
            </select>
    </body>
</html>
Wobei man halt noch an gewissen Ecken vielleicht noch was drehen könnte.
 
Servus SCIPIO-AEMILIANUS,

vielen Dank für den Quelltext - das ist eigentlich genau das was ich gesucht habe.
Leider hat das Script noch einen kleinen Schönheitsfehler - beim Laden der Seite wird im 2ten Auswahlfeld die erste Option bereits angezeigt.
Ich habe es wie folgt geändert:
HTML: 
<html>
    <head>
        <script type="text/javascript">
            function wechsel(el) {
                document.getElementById("gr1").style.display = "none";
                document.getElementById("gr2").style.display = "none";
                document.getElementById("gr3").style.display = "none";
                document.getElementById(el.options[el.selectedIndex].value).style.display="block";
            }
        </script>
    </head>
    <body>
            <select onchange="wechsel(this)">
                <option>Bitte wählen...</option>
                <option value="gr1">GRUPPE 1</option>

                <option value="gr2">GRUPPE 2</option>
                <option value="gr3">GRUPPE 3</option>
            </select>
            <select id="sel2">
            <option>&nbsp;</option>
                <optgroup style="display:none;" id="gr1">
                    <option>GR1-A</option>

                    <option>GR1-B</option>
                </optgroup>
                <optgroup style="display:none;" id="gr2">
                    <option>GR2-A</option>
                    <option>GR2-B</option>
                </optgroup>
                <optgroup style="display:none;" id="gr3">

                    <option>GR3-A</option>
                    <option>GR3-B</option>
                </optgroup>
            </select>
    </body>
</html>

Vielen Dank für deinen Quellcode du hast mir sehr weitergeholfen!
 
Hi,

hast du dir die Funktionweise schon mal im IE angesehen?

Alternativ hat Sven Mintel hier eine Variante mit Ajax vorgestellt.

Ciao
Quaese
 
Stimmt - ich hatte es mir nur im Firefox angeschaut.

Ich werde mir mal das ganze von Sven anschauen - aber so wie ich Sven kenne hat das Hand und Fuss und funktioniert bestens.

Vielen Dank für den Tipp
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück