带有文本的下拉菜单

Question

Basically, I am looking for a drop down menu and you will click an option and it displays a table. 基本上，我正在寻找一个下拉菜单，您将单击一个选项，它会显示一个表格。 If you check out the link below, it shows the code and a working preview (kind of). 如果您查看以下链接，它将显示代码和有效的预览（类似）。 Basically, the problem I have is that it only works for the first 2 options and will not work for any of the other ones. 基本上，我的问题是它仅适用于前两个选项，而不适用于其他任何一个。 The first 2, it works perfect though. 前2个虽然效果很好。 Hopefully you will see what I mean. 希望你能明白我的意思。 Any help would be appreciated. 任何帮助，将不胜感激。

https://jsfiddle.net/ca0cb7oz/ 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 个解决方案

解决方案1
0 2017-07-04 15:14:19

带有文本的下拉菜单

问题描述

1 个解决方案

解决方案1 0 2017-07-04 15:14:19

解决方案1
0 2017-07-04 15:14:19