Ausblenden nach Select-Option Auswahl

Hi zusammen,

Ich habe eine Select Auswahl mit 2 Optionen..

Wenn Option 1 ausgewählt wird soll unterhalb der Select-Box jeweils etwas anderes angezeigt werden.

Wie kann ich dies umsetzen?

Danke für eure Hilfe!

Zitat von Sempervivum

Wären es Radiobuttons, wäre es ein Leichtes, es mit CSS zu realisieren, aber mit select kenne ich nur eine Lösung mit Javascript:

Code

    <select id="select1">
        <option value="opt1" selected>Option 1</option>
        <option value="opt2">Option 2</option>
    </select>
    <div class="content">Content 1</div>
    <div class="content" style="display:none;">Content 2</div>
    <script>
        select1.addEventListener("change", function() {
            var cont = document.querySelectorAll(".content");
            for (var i = 0; i < cont.length; i++) {
                if (i == this.selectedIndex) cont[i].style.display = "block";
                else cont[i].style.display = "none";
            }
        });
    </script>

Alles anzeigen

Danke, hast mir geholfen eine akzeptable Lösung zu finden!

Zitat von Sempervivum

Wären es Radiobuttons, wäre es ein Leichtes, es mit CSS zu realisieren, aber mit select kenne ich nur eine Lösung mit Javascript:

Code

    <select id="select1">
        <option value="opt1" selected>Option 1</option>
        <option value="opt2">Option 2</option>
    </select>
    <div class="content">Content 1</div>
    <div class="content" style="display:none;">Content 2</div>
    <script>
        select1.addEventListener("change", function() {
            var cont = document.querySelectorAll(".content");
            for (var i = 0; i < cont.length; i++) {
                if (i == this.selectedIndex) cont[i].style.display = "block";
                else cont[i].style.display = "none";
            }
        });
    </script>

Alles anzeigen

Wie wäre es wenn ich 2 Radio-Buttons habe und je nach Wahl etwas anders Anzeige/Ausblende? und dies per CSS?

Danke für die Hilfe!