Wie wird eine Tabelle nach einem ausgewählten Wert angezeigt?

Question

Ich brauche Hilfe, ich programmiere eine <select> mit 4 Werten <option> Ich möchte, dass die Tabellen keine sichtbaren dann wenn ich auf die Option klicken, zeigen Sie eine Tabelle, wie kann ich das tun?

<select name="ejercicio"> 
 
    <option value="16">exercise 2016</option>//when click here display a table 
 
    <option value="17">exercise 2017</option>//when click here display other table 
 
    <option value="18">exercise 2018</option>//*** 
 
    <option value="19">exercise 2019</option>//*** 
 
</select>

Answer 1

Ich bin mir nicht sicher, ob Sie JQuery in Ihrem Projekt empfohlen haben. Wenn Sie nicht haben, können Sie es so versuchen: HTML: HTML CONTENT CSS:

.table-list{ 
    display:none; 
} 

JS:

var select = document.getElementById("toggle"); 
toggle.addEventListener('change',function(){ 
    var tbs = document.getElementsByClassName('table-list'); 
for(var i=0;i<4;i++){ 
    tbs[i].style.display = 'none'; 
} 
var tbName = select.value; 
document.getElementById('tbName').style.display = 'block'; 
}); 

Und Sie können es here is the live demo for you

Answer 2

können Sie versuchen, den Index der ausgewählten Option zu bekommen und es in eine eigene Funktion verwenden, um die Sichtbarkeit der Tabelle wahr zu ändern.

z. : Sie haben vier Tabellen, die Sie bis auf das Ende gleich nennen. Dort fügen Sie den späteren Index der Option hinzu, der verwendet wird, um die Tabelle auf sichtbar zu setzen. In Ihrer Funktion können Sie den Namespace der Tabelle verwenden und den Index der ausgewählten Option anhängen, um die Tabelle abzurufen und die Sichtbarkeit der Tabelle festzulegen.

Ich hoffe, es wird :) helfen

Answer 3

seine ganz einfach nur Wert der Auswahl überprüfen und verwenden es Tabelle hier zu zeigen ist Beispiel

CSS:

.tablecontainer li { display: none; } 
.tablecontainer li.show { display: block; } 

HTML:

<select name="selectbox"> 
    <option value="" checked>Select</option> 
    <option value="firsttable">Table 1</option> 
    <option value="sectable">Table 2</option> 
</select> 

<ul class="tablecontainer"> 
<li id="firsttable"> 
    <table> 
    <tr> 
    <td>First table</td> 
    </tr> 
    </table> 
</li> 
<li id="firsttable"> 
    <table> 
    <tr> 
    <td>First table</td> 
    </tr> 
    </table> 
</li> 
</ul> 

Schließlich Jquery:

$('select').on("change", function(event) { 
event.preventDefault(); 
$(".tablecontainer") 
    .find("#" + $(this).val()) 
    .addClass("show") 
    .siblings() 
    .removeClass("show"); 
}); 

ich bin sicher, dass es Ihnen helfen wird.