Question

基本上，我正在寻找一个下拉菜单，您将点击一个选项，它会显示一个表格。如果您查看下面的链接，它会显示代码和工作预览（种类）。基本上，我遇到的问题是它只适用于前两个选项，不适用于任何其他选项。前2，虽然工作得很完美。希望你会明白我的意思。任何帮助将不胜感激。

https://jsfiddle.net/ca0cb7oz/

function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 6px;
}

<body>
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Start Location:</td>
<td class="field">
<select name="type" onchange="display(this,'Warr','CrFields','OldLivRd','Penk','Cuerd','Halt','Widn');">
<option>Please select:</option>
<option value="Warr">Warrington Interchange</option>
<option value="CrFields">Crossfields</option>
<option value="LivRd">Old Liverpool Road</option>
<option value="Penk">Penketh Road</option>
<option value="Cuerd">Cuerdley Cross</option>
<option value="Halt">Halton View</option>
<option value="Widn">Widnes Green Oaks</option>
</select>
</td>
</tr>
</thead>
<tbody id="Warr" style="display: none;">
<tr>
<tr>
    <th>Destination</th>
    <th>Adult Single</th>
    <th>Adult Return</th>
    <th>Child Single</th>
    <th>Child Return</th>
  </tr>
  <tr>
    <td>Crossfields</td>
    <td>£1.80</td>
    <td>£3.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Old Liverpool Road In</td>
    <td>£1.80</td>
    <td>£3.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Penketh Road</td>
    <td>£2.30</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Curdley Cross</td>
    <td>£2.80</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Halton View</td>
    <td>£2.80</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Widnes Green Oaks</td>
    <td>£3.30</td>
    <td>£4.80</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
</tr>
<tbody id="CrFields" style="display: none;">
<tr>
<tr>
    <th>Destination</th>
    <th>Adult Single</th>
    <th>Adult Return</th>
    <th>Child Single</th>
    <th>Child Return</th>
  </tr>
  <tr>
    <td>Crossfields</td>
    <td>£1.80</td>
    <td>£3.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Old Liverpool Road In</td>
    <td>£1.80</td>
    <td>£3.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Penketh Road</td>
    <td>£2.30</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Curdley Cross</td>
    <td>£2.80</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Halton View</td>
    <td>£2.80</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Widnes Green Oaks</td>
    <td>£3.30</td>
    <td>£4.80</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
</tr>
<tbody id="OldLivRd" style="display: none;">
<tr>
<tr>
    <th>Destination</th>
    <th>Adult Single</th>
    <th>Adult Return</th>
    <th>Child Single</th>
    <th>Child Return</th>
  </tr>
  <tr>
    <td>Crossfields</td>
    <td>£1.80</td>
    <td>£3.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Old Liverpool Road In</td>
    <td>£1.80</td>
    <td>£3.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Penketh Road</td>
    <td>£2.30</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Curdley Cross</td>
    <td>£2.80</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Halton View</td>
    <td>£2.80</td>
    <td>£4.00</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
  <tr>
    <td>Widnes Green Oaks</td>
    <td>£3.30</td>
    <td>£4.80</td>
    <td>N/A</td>
    <td>N/A</td>
  </tr>
</tr>
<tbody id="Penk" style="display: none;">
<tr>

</tr>
<tbody id="Cuerd" style="display: none;">
<tr>

</tr>
<tbody id="Halt" style="display: none;">
<tr>

</tr>
<tbody id="Widn" style="display: none;">
<tr>

</tr>

</tbody>
</table>
</body>

Answer 1

某些<tr/> - 标签是多余的，这意味着您可能遇到HTML问题，而不是JavaScript。

带文字的下拉菜单

1 个答案: