Dropdown-Menü mit Text

Grundsätzlich suche ich nach einem Dropdown-Menü und Sie werden auf eine Option klicken und es wird eine Tabelle angezeigt. Wenn Sie den folgenden Link sehen, zeigt es den Code und eine funktionierende Vorschau (Art von). Im Grunde ist das Problem, das ich habe, dass es nur für die ersten 2 Optionen funktioniert und nicht für alle anderen funktioniert. Die ersten 2, es funktioniert jedoch perfekt. Hoffentlich wirst du sehen, was ich meine. Jede Hilfe wäre willkommen.Dropdown-Menü mit Text

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>

Quelle

2017-07-04 Mark Smith

Einige <tr/> -Tags sind überflüssig, was bedeutet, dass Sie mit HTML ein Problem haben könnte, nicht JavaScript.

Quelle

2017-07-04 15:14:19 PSchwede

Ich bin nicht sehr gut mit Code. Um ehrlich zu sein, habe ich einen frei verfügbaren Code genommen und versucht, ihn an meine Bedürfnisse anzupassen und natürlich hat es nicht geklappt. Weißt du, wo das HTML-Problem sein könnte? –

Bitte lesen Sie https://www.w3schools.com/html/html_tables.asp, um zu sehen, wie eine HTML-Tabelle aussieht und vergleichen Sie sie mit Ihrer. Es ist einfacher als du denkst. – PSchwede

Dropdown-Menü mit Text

Antwort

Verwandte Themen