mit .getElementsByClassName in einem Selektor

Question

Ich versuche .getElementsByClassName anstelle von .getElementById zu verwenden, um Werte in einem Selektor abzurufen, wenn eine bestimmte Option ausgewählt ist. Es gibt mehrere Werte in einer Tabelle, daher muss ich Klassen verwenden, um alle diese Werte anstelle von IDs auszuwählen.

Ich weiß, ich habe keine .selectedIndex s für alle Werte. Diese erste, die ich generierte, war ein Test, um zu sehen, ob es funktionieren würde. Es funktioniert nicht.

Kann mir jemand sagen, was ich falsch mache?

Hier ist, was ich bisher:

<script>  
function other() {  
if (document.getElementsByClassName("SBA")[0].selectedIndex == "16") { } 
else { document.getElementsByClassName("SBA")[0].style.display = "none"; } 
} 
</script> 

<style> 

.roomselector select { color: #0E4D8D; 
         border: 0px transparent; 
         width: 50%; }      

option { border: 0px transparent; } 

</style> 

<div class="roomselector"> 
<select id="room" onchange="other()"> 
<option selected="selected" value="0">All Room Types</option> 
<option value="1">Single Room</option> 
<option value="2">Single Suite</option> 
<option value="3">Double Room</option> 
<option value="4">Double Suite</option> 
<option value="5">Two Room Double</option> 
<option value="6">Two Room Triple</option> 
<option value="7">Two Room Quad</option> 
<option value="8">Triple Room</option> 
<option value="9">Economy Triple</option> 
<option value="10">Late Application Triple</option> 
<option value="11">Three Room Triple</option> 
<option value="12">Three Room Quad</option> 
<option value="13">Four Person Apartment</option> 
<option value="14">Quad Room</option> 
<option value="15">Private Bedroom Apartment</option> 
<option value="16">Shared Bedroom Apartment</option> 
<option value="17">Super Suite</option> 
</select></div> 

<table> 
<caption style="background: #0E4D8D;"><h1 style="text-align: center; color: #fff; padding-top: 10px;">Beaty Towers</h1> 
<br /><h4 style="color:#6392BE;">Towers</h4></caption> 
<tbody> 
<tr style="background: #b9d3ee; border-bottom: 1px solid #0E4D8D;"> 
<td> 
<h4>Residence Hall</h4> 
</td> 
<td> 
<h4>Room Type</h4> 
</td> 
<td> 
<h4>Room Rate</h4> 
</td> 
</tr> 
<tr class="SBA" style="background: #EFEFEF;"> 
<td><strong>Towers</strong></td> 
<td>Shared Bedroom Apartment</td> 
<td>$2,000</td> 
</tr> 
</tbody> 
</table> 

Answer 1

Problem mit der if-Bedingung ist, document.getElementsByClassName("SBA")[0] gibt das tr Element, das nicht selectedIndex Eigenschaft hat. Sie müssen mit dem select Tag von id so es if(document.getElementById("room").selectedIndex == "16")

ändern

function other() { 
 
    console.log(document.getElementById("room").selectedIndex); 
 
    if (document.getElementById("room").selectedIndex == 16) { 
 
    document.getElementsByClassName("SBA")[0].style.display = "block"; 
 
    } else { 
 
    document.getElementsByClassName("SBA")[0].style.display = "none"; 
 
    } 
 
}

<style> 
 
    .roomselector select { 
 
    color: #0E4D8D; 
 
    border: 0px transparent; 
 
    width: 50%; 
 
    } 
 
    option { 
 
    border: 0px transparent; 
 
    } 
 
</style> 
 

 
<div class="roomselector"> 
 
    <select id="room" onchange="other()"> 
 
    <option selected="selected" value="0">All Room Types</option> 
 
    <option value="1">Single Room</option> 
 
    <option value="2">Single Suite</option> 
 
    <option value="3">Double Room</option> 
 
    <option value="4">Double Suite</option> 
 
    <option value="5">Two Room Double</option> 
 
    <option value="6">Two Room Triple</option> 
 
    <option value="7">Two Room Quad</option> 
 
    <option value="8">Triple Room</option> 
 
    <option value="9">Economy Triple</option> 
 
    <option value="10">Late Application Triple</option> 
 
    <option value="11">Three Room Triple</option> 
 
    <option value="12">Three Room Quad</option> 
 
    <option value="13">Four Person Apartment</option> 
 
    <option value="14">Quad Room</option> 
 
    <option value="15">Private Bedroom Apartment</option> 
 
    <option value="16">Shared Bedroom Apartment</option> 
 
    <option value="17">Super Suite</option> 
 
    </select> 
 
</div> 
 

 
<table> 
 
    <caption style="background: #0E4D8D;"> 
 
    <h1 style="text-align: center; color: #fff; padding-top: 10px;">Beaty Towers</h1> 
 
    <br /> 
 
    <h4 style="color:#6392BE;">Towers</h4> 
 
    </caption> 
 
    <tbody> 
 
    <tr style="background: #b9d3ee; border-bottom: 1px solid #0E4D8D;"> 
 
     <td> 
 
     <h4>Residence Hall</h4> 
 
     </td> 
 
     <td> 
 
     <h4>Room Type</h4> 
 
     </td> 
 
     <td> 
 
     <h4>Room Rate</h4> 
 
     </td> 
 
    </tr> 
 
    <tr class="SBA" style="background: #EFEFEF;"> 
 
     <td><strong>Towers</strong> 
 
     </td> 
 
     <td>Shared Bedroom Apartment</td> 
 
     <td>$2,000</td> 
 
    </tr> 
 
    </tbody> 
 
</table>