0
基本的には、ドロップダウンメニューを探していて、オプションをクリックするとテーブルが表示されます。下のリンクをチェックアウトすると、コードと実際のプレビュー（種類）が表示されます。基本的に、私が持っている問題は、最初の2つのオプションのためだけに機能し、他のオプションのいずれに対しても機能しないということです。最初の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>
私はコードがあまりよくありません。正直言って、私は自由に利用できるコードをとり、それを私のニーズに合わせて修正しようとしましたが、もちろんそれはうまくいきませんでした。 HTMLの問題がどこにあるのか知っていますか？ –
HTMLテーブルの表示方法については、https://www.w3schools.com/html/html_tables.aspを参照して、自分のHTMLテーブルと比較してください。あなたが考えるより簡単です。 – PSchwede