Question

当我选择某个选项时，我正在尝试使用.getElementsByClassName而不是.getElementById来检索选择器中的值。表中有多个值，因此我需要使用Classes来选择所有这些值而不是ID。

我意识到我的所有值都没有.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

问题在于if条件，document.getElementsByClassName("SBA")[0]会返回不具有tr属性的selectedIndex元素。您需要按select标记ID，因此请将其更改为if(document.getElementById("room").selectedIndex == "16")

＆＃13;

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";
  }
}

＆＃13;

<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>

＆＃13;

在选择器中使用.getElementsByClassName

1 个答案: