セレクタで.getElementsByClassNameを使用する

Question

.getElementByIdの代わりに.getElementsByClassNameを使用して、特定のオプションが選択されているときにセレクタの値を取得しようとしています。テーブルには複数の値があるので、クラスの代わりにこれらの値をすべて選択する必要があります。

すべての値に対して.selectedIndexがありません。私が生成した最初のものは、それがうまくいくかどうかを確認するテストでした。動いていない。

私が間違っていることを誰かに教えてもらえますか？

は、ここで私がこれまで持っているものです。

<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

問題があれば条件である、document.getElementsByClassName("SBA")[0]はselectedIndex性質を持っていないtr要素を返します。あなたがidでselectタグに必要なので、if(document.getElementById("room").selectedIndex == "16")

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>