Zeigen Sie unterschiedlichen Text in einem separaten DIV durch ausgewählte Optionen an ⇐ Jquery

[Anonymous]

Ich versuche, bei der Auswahl einer Option aus einer Auswahl einen anderen Text anzuzeigen, aber es funktioniert nicht. Vielen Dank.

Code: Select all

$(document).ready(function($) {
$('#open').on('click', function(event) {
$('#Text1').addClass('visible');
});
});
$(document).ready(function($) {
$('#close').on('click', function(event) {
$('#Text1').removeClass('visible');
$('#Text2').removeClass('visible');
$('#Text3').removeClass('visible');
$('#Text4').removeClass('visible');
$('#Text5').removeClass('visible');
});
});
$(document).ready(function($) {
$("#select").val("1").on('change', function(event) {
$('#Text1').addClass('visible');
$('#Text2').removeClass('visible');
$('#Text3').removeClass('visible');
$('#Text4').removeClass('visible');
$('#Text5').removeClass('visible');
});
});
$(document).ready(function($) {
$("#select").val("2").on('change', function(event) {
$('#Text1').removeClass('visible');
$('#Text2').addClass('visible');
$('#Text3').removeClass('visible');
$('#Text4').removeClass('visible');
$('#Text5').removeClass('visible');
});
});
$(document).ready(function($) {
$("#select").val("3").on('change', function(event) {
$('#Text1').removeClass('visible');
$('#Text2').removeClass('visible');
$('#Text3').addClass('visible');
$('#Text4').removeClass('visible');
$('#Text5').removeClass('visible');
});
});
$(document).ready(function($) {
$("#select").val("4").on('change', function(event) {
$('#Text1').removeClass('visible');
$('#Text2').removeClass('visible');
$('#Text3').removeClass('visible');
$('#Text4').addClass('visible');
$('#Text5').removeClass('visible');
});
});
$(document).ready(function($) {
$("#select").val("5").on('change', function(event) {
$('#Text1').removeClass('visible');
$('#Text2').removeClass('visible');
$('#Text3').removeClass('visible');
$('#Text4').removeClass('visible');
$('#Text5').addClass('visible');
});
});< /code>
#Text1,
#Text2,
#Text3,
#Text4,
#Text5 {
opacity: 0;
visibility: hidden;
}

#Text1.visible,
#Text2.visible,
#Text3.visible,
#Text4.visible,
#Text5.visible {
opacity: 1;
visibility: visible;
}< /code>


Open
Close


1
2
3
4
5


Show text 1
Show text 2
Show text 3
Show text 4
Show text 5

Https://jsfiddle.net/ytgb3p27/10/