我有一个下拉列表,我想根据所选选项在其下方显示不同的表格。
我已经在这里看到了: Javascript - <option> 中的 onchange
我能够复制它,但我真的不知道如何添加更多选项/表格。
有人可以帮忙吗?这是到目前为止的代码:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var eSelect = document.getElementById('transfer_reason');
var optOtherReason = document.getElementById('otherdetail');
eSelect.onchange = function() {
if(eSelect.value === "other") {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
var optOtherReason = document.getElementById('other2');
eSelect.onchange = function() {
if(eSelect.value === "z") {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
}
</script>
</head>
<body>
<select id="transfer_reason" name="transfer_reason">
<option value="">Motivo</option>
<option value="x">Reason 1</option>
<option value="y">Reason 2</option>
<option value="z">Reason 3</option>
<option value="other">Other Reason</option>
</select>
<br>
<table border="1" id="otherdetail" style="display: none;">
<tr>
<th>Versão 11</th><th>Versão 12</th><th>Justificativas</th>
</tr>
<tr>
<td> 1</td><td>Angelina</td><td>Delhi</td>
</tr>
</table>
<table border="1" id="other2" style="display: none;">
<tr>
<th>Versão 11</th><th>Versão 12</th><th>Justificativas</th>
</tr>
<tr>
<td> 1</td><td>Galeno</td><td>Delhi</td>
</tr>
</table>
</body>
</html>
就像现在一样,只有 id="other2" 的表正确加载,而另一个表没有。