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!

Sempervivum schrieb:

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

1. <select id="select1">
2. <option value="opt1" selected>Option 1</option>
3. <option value="opt2">Option 2</option>
4. </select>
5. <div class="content">Content 1</div>
6. <div class="content" style="display:none;">Content 2</div>
7. <script>
8. select1.addEventListener("change", function() {
9. var cont = document.querySelectorAll(".content");
10. for (var i = 0; i < cont.length; i++) {
11. if (i == this.selectedIndex) cont[i].style.display = "block";
12. else cont[i].style.display = "none";
13. }
14. });
15. </script>

Alles anzeigen

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

Sempervivum schrieb:

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

1. <select id="select1">
2. <option value="opt1" selected>Option 1</option>
3. <option value="opt2">Option 2</option>
4. </select>
5. <div class="content">Content 1</div>
6. <div class="content" style="display:none;">Content 2</div>
7. <script>
8. select1.addEventListener("change", function() {
9. var cont = document.querySelectorAll(".content");
10. for (var i = 0; i < cont.length; i++) {
11. if (i == this.selectedIndex) cont[i].style.display = "block";
12. else cont[i].style.display = "none";
13. }
14. });
15. </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!