Dropdown durch klick auf eine Option Input Feld ein/ausblenden?


frank.henschel

Grünschnabel
Hallo

Leider kenn ich mich mit JS nicht sehr gut aus darum frage ich mal hier nach.

Ich möchte über ein Dropdown verschiedene Ratio Buttons anzeigen oder auch verschwinden lassen.

HTML:
<script language="javascript" type="text/javascript">
    function einblenden ()

    if (document.getElementById("Standort_mod").selectedIndex == "1") {
    document.getElementById("mod_liestal").style.visibility = "visible";

    } else {
        if (document.getElementById("Standort_mod").selectedIndex == "2") {
        document.getElementById("mod_bruderholz").style.visibility = "visible";

        } else {
            if (document.getElementById("Standort_mod").selectedIndex == "3") {
            document.getElementById("mod_laufen").style.visibility = "visible";

            } else {document.getElementById("mod_laufen").style.visibility = "hidden";
            }
            (document.getElementById("mod_liestal").style.visibility = "hidden")
            &&
            (document.getElementById("mod_bruderholz").style.visibility = "hidden")
            &&
            (document.getElementById("mod_laufen").style.visibility = "hidden");
    }
    }

</script>



<label>Standort:</label>
<select class="cms_dropdown" name="Standort_mod" id="Standort_mod" value="Standort" onchange="einblenden();">

    <option value="auswahl_leer">Standort</option>

    <option value="liestal">Liestal</option>

    <option value="bruderholz">Bruderholz</option>

    <option value="laufen">Laufen</option>

</select>


<div id="mod_liestal" class="radioGroup" style="visibility:hidden;">

    <label for="custom.modalitaet">Modalitaet:</label> <br />

    <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

    <span class="vvtmodalitaet" id="Mod1.name">Mod1 Liestal</span>
    <span id="Mod1"></span> <br />

</div>

<div id="mod_bruderholz" class="radioGroup" style="visibility:hidden;">

    <label for="custom.modalitaet">Modalitaet:</label> <br />

    <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

    <span class="vvtmodalitaet" id="Mod1.name">Mod2 Brunderholz</span>
    <span id="Mod1"></span> <br />

</div>

<div id="mod_laufen" class="radioGroup" style="visibility:hidden;">

    <label for="custom.modalitaet">Modalitaet:</label> <br />

    <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

    <span class="vvtmodalitaet" id="Mod1.name">Mod3 Laufen</span>
    <span id="Mammographie"></span> <br />

</div>
Mit der ersten Option funktioniert es auch aber nicht mit zwei und drei. Der Fehler ist innerhalb der If / Else abfrage ... Kann mit jemand hier helfen?

Danke!
 

Sempervivum

Erfahrenes Mitglied
Übersichtlicher wird es, wenn Du statt eines mehrfachen if-else einen Switch verwendest, dann entstehen solche Fehler wahrscheinlich gar nicht:
Javascript:
function einblenden ()

    switch (document.getElementById("Standort_mod").selectedIndex == "1") {
        case 1:
            // liestal sichtbar machen, bruderholz und laufen verbergen
            break;
        case 2:
            // bruderholz sichtbar machen, liestal und laufen verbergen
            break;
        case 3:
            // laufen sichtbar machen, liestal und bruderholz verbergen
            break;
    }
Oder, wenn es leicht erweiterbar sein soll, bei den Containern für die Radiogroups den selectedIndex als data-Attribut konfigurieren:
HTML:
<div id="mod_liestal" class="radioGroup" data-idxsel="1" style="visibility:hidden;">

    <label for="custom.modalitaet">Modalitaet:</label> <br />

    <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

    <span class="vvtmodalitaet" id="Mod1.name">Mod1 Liestal</span>
    <span id="Mod1"></span> <br />

</div>

<div id="mod_bruderholz" class="radioGroup" data-idxsel="2" style="visibility:hidden;">

    <label for="custom.modalitaet">Modalitaet:</label> <br />

    <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

    <span class="vvtmodalitaet" id="Mod1.name">Mod2 Brunderholz</span>
    <span id="Mod1"></span> <br />

</div>

<div id="mod_laufen" class="radioGroup" data-idxsel="3" style="visibility:hidden;">

    <label for="custom.modalitaet">Modalitaet:</label> <br />

    <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

    <span class="vvtmodalitaet" id="Mod1.name">Mod3 Laufen</span>
    <span id="Mammographie"></span> <br />

</div>
Und dann diese in einer Schleife abarbeiten:
Javascript:
const rbGroups = document.querySelectorAll('.radioGroup'):
const idxSel = document.getElementById("Standort_mod").selectedIndex;
for (let i = 0; i < rbGroups.length; i++ {
    const theGroup = rbGroups[i];
    if (theGroup.getAttribute('data-idxsel') == idxSel) {
        theGroup.style.visibilty = 'visible';
    } else {
        theGroup.style.visibilty = 'hidden';
    }
}
 

frank.henschel

Grünschnabel
Uhhii ... Viele Dank!

Bei mir sieht das nun so aus - aber funktionieren ist was anderes -_- :
Code:
<script language="javascript" type="text/javascript">

    const rbGroups = document.querySelectorAll('.radioGroup'):
    const idxSel = document.getElementById("Standort_mod").selectedIndex;
    for (let i = 0; i < rbGroups.length; i++ {
            const theGroup = rbGroups[i];
            if (theGroup.getAttribute('data-idxsel') == idxSel) {
            theGroup.style.visibilty = 'visible';
            } else {
            theGroup.style.visibilty = 'hidden';
            }
            }
        </script>

        <label>Standort:</label>
        <select class="cms_dropdown" name="Standort_mod" id="Standort_mod" value="Standort" onchange="einblenden();">

            <option value="auswahl_leer">Standort</option>

            <option value="liestal">Liestal</option>

            <option value="bruderholz">Bruderholz</option>

            <option value="laufen">Laufen</option>

        </select>

        <div id="mod_liestal" class="radioGroup" data-idxsel="1" style="visibility:hidden;">

            <label for="custom.modalitaet">Modalitaet:</label> <br />

            <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

            <span class="vvtmodalitaet" id="Mod1.name">Mod1 Liestal</span>
            <span id="Mod1"></span> <br />

        </div>

        <div id="mod_bruderholz" class="radioGroup" data-idxsel="2" style="visibility:hidden;">

            <label for="custom.modalitaet">Modalitaet:</label> <br />

            <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

            <span class="vvtmodalitaet" id="Mod1.name">Mod2 Brunderholz</span>
            <span id="Mod1"></span> <br />

        </div>

        <div id="mod_laufen" class="radioGroup" data-idxsel="3" style="visibility:hidden;">

            <label for="custom.modalitaet">Modalitaet:</label> <br />

            <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

            <span class="vvtmodalitaet" id="Mod1.name">Mod3 Laufen</span>
            <span id="Mod1"></span> <br />

        </div>
 

Sempervivum

Erfahrenes Mitglied
Ich dachte, Du könntest es dir zusammen reimen: Das Javascript muss natürlich in die Funktion einblenden():
Code:
<script>
function einblenden() {
    const rbGroups = document.querySelectorAll('.radioGroup'):
    const idxSel = document.getElementById("Standort_mod").selectedIndex;
    for (let i = 0; i < rbGroups.length; i++ {
        const theGroup = rbGroups[i];
        f (theGroup.getAttribute('data-idxsel') == idxSel) {
            theGroup.style.visibilty = 'visible';
        } else {
            theGroup.style.visibilty = 'hidden';
        }
    }
}
</script>
language und type braucht man heute nicht mehr.
 

Sempervivum

Erfahrenes Mitglied
Das Ganze war noch nicht getestet, weil ich dir auch noch etwas zu tun übrig lassen wollte :)
Es waren auch noch drei Fehler im Javascript aber so funktioniert es jetzt:
Code:
    <script>
        function einblenden() {
            const rbGroups = document.querySelectorAll('.radioGroup');
            const idxSel = document.getElementById("Standort_mod").selectedIndex;
            for (let i = 0; i < rbGroups.length; i++) {
                const theGroup = rbGroups[i];
                if (theGroup.getAttribute('data-idxsel') == idxSel) {
                    theGroup.style.visibility = 'visible';
                } else {
                    theGroup.style.visibility = 'hidden';
                }
            }
        }
    </script>
 

frank.henschel

Grünschnabel
Das funktionert SUPER! Danke.

Eine Frage noch, wie kann ich das Ergebniss immer an der gleichen Stelle ausgeben? Aktuell wird es wie in Zeilen untereinander ausgegeben.
Eine Idee?

Danke!
 

Sempervivum

Erfahrenes Mitglied
Das war mir auch schon aufgefallen und ich war mir nicht sicher, ob es so gewollt war: Wenn Du ein Element mit visibility: hidden; unsichtbar machst, nimmt es trotzdem seinen Platz ein. Verwende statt dessen theGroup.style.display = 'block'; bzw. 'none', dann verschwindet es vollständig.
 

frank.henschel

Grünschnabel
Auch wenn ich 'block' oder 'none' nutze klappt es nicht:
Code:
<script>
    function einblenden() {
    const rbGroups = document.querySelectorAll('.radioGroup');
    const idxSel = document.getElementById("Standort_mod").selectedIndex;
    for (let i = 0; i < rbGroups.length; i++) {
            const theGroup = rbGroups[i];
            if (theGroup.getAttribute('data-idxsel') == idxSel) {
            theGroup.style.visibility = 'visible';
            } else {
            theGroup.style.visibility = 'block';
            }
            }
            }
        </script>

        <label>Standort:</label>
        <select class="cms_dropdown" name="Standort_mod" id="Standort_mod" value="Standort" onchange="einblenden();">

            <option value="auswahl_leer">Standort</option>

            <option value="liestal">Liestal</option>

            <option value="bruderholz">Bruderholz</option>

            <option value="laufen">Laufen</option>

        </select>

        <div id="mod_liestal" class="radioGroup" data-idxsel="1" style="visibility:hidden;">

            <label for="custom.modalitaet">Modalitaet:</label> <br />

            <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

            <span class="vvtmodalitaet" id="Mod1.name">Mod1 Liestal</span>
            <span id="Mod1"></span> <br />

        </div>

        <div id="mod_bruderholz" class="radioGroup" data-idxsel="2" style="visibility:hidden;">

            <label for="custom.modalitaet">Modalitaet:</label> <br />

            <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

            <span class="vvtmodalitaet" id="Mod1.name">Mod2 Brunderholz</span>
            <span id="Mod1"></span> <br />

        </div>

        <div id="mod_laufen" class="radioGroup" data-idxsel="3" style="visibility:hidden;">

            <label for="custom.modalitaet">Modalitaet:</label> <br />

            <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

            <span class="vvtmodalitaet" id="Mod1.name">Mod3 Laufen</span>
            <span id="Mod1"></span> <br />

        </div>
Habe ich es wieder an der falschen Stelle?
Auch wenn ich style="visibility:hidden; im div entferne.
 

Sempervivum

Erfahrenes Mitglied
Nein, Du hast es nur nicht vollständig durchgezogen: In beiden Zeilen display und dann none bzw. block:
Code:
        if (theGroup.getAttribute('data-idxsel') == idxSel) {
            theGroup.style.display = 'block';
        } else {
            theGroup.style.display = 'none';
        }
 

frank.henschel

Grünschnabel
Mit diesen Werten:
Code:
<script>
    function einblenden() {
    const rbGroups = document.querySelectorAll('.radioGroup');
    const idxSel = document.getElementById("Standort_mod").selectedIndex;
    for (let i = 0; i < rbGroups.length; i++) {
            const theGroup = rbGroups[i];
            if (theGroup.getAttribute('data-idxsel') == idxSel) {
            theGroup.style.visibility = 'block';
            } else {
            theGroup.style.visibility = 'none';
            }
            }
            }
        </script>
und diesem div:
HTML:
<div id="mod_liestal" class="radioGroup" data-idxsel="1" style="visibility:hidden;">
        

            <label for="custom.modalitaet">Modalitaet:</label> <br />

            <input type="radio" name="custom.modalitaet" class="cms_textfield" value="Mod1" required="required" onClick="document.getElementById('requiredField').value=this.value"/>

            <span class="vvtmodalitaet" id="Mod1.name">Mod1 Liestal</span>
            <span id="Mod1"></span> <br />

        </div>
Habe ich nur noch das Dropdown aber kein Ergebnis.
 

Sempervivum

Erfahrenes Mitglied
Du hast es immer noch nicht vollständig durchgezogen:

theGroup.style.visibility = 'block';
} else {
theGroup.style.visibility = 'none';

So wäre es richtig:

theGroup.style.display= 'block';
} else {
theGroup.style.display = 'none';