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/