在下拉列表中加载表格答案

【问题标题】：Tables loading on a dropdown在下拉列表中加载表格
【发布时间】：2012-09-18 18:53:25
【问题描述】：

我有一个下拉菜单，我想根据所选选项在其下方显示不同的表格。

我已经在这里看到了： Javascript - onchange within <option>

我能够复制它，但我真的不知道如何添加更多选项/表格。

有人可以帮忙吗？这是到目前为止的代码：

<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" 的表可以正确加载，而其他表没有。

【问题讨论】：

请直接在您的问题中发布代码。您将在不久的将来删除 Dropbox 文件，然后它就会消失。
您说您不知道如何添加更多选项/表格...这是否意味着您不知道如何向 HTML 添加更多内容，或者您遇到的问题是 Javascript和？而且，就像 yunzen 所说，你应该发布你的代码。
只是 JS 有问题。我可以添加一个表，但当我想添加更多时失败了。

标签： javascript drop-down-menu html-table onchange

【解决方案1】：

有比示例中存在的更好的方法。如果您在下拉列表中使用表 ID 值，整个事情会变得更容易。

<script type="text/javascript">
    window.onload = function() {
    var eSelect = document.getElementById('transfer_reason');
    var selVal;
    hideTables();
    eSelect.onchange = function() {
        hideTables();    
         selVal = eSelect[eSelect.selectedIndex].value;
        document.getElementById(selVal).style.display = "block";
    }

}

function hideTables() {
     var tables = document.getElementsByTagName("table");
    for(var x=0;x<tables.length;x++) {
        tables[x].style.display = "none";
    }
}    
 </script>

HTML：

  <select id="transfer_reason" name="transfer_reason">
        <option value="">Motivo</option>
        <option value="Table1">Reason 1</option>
        <option value="Table2">Reason 2</option>
        <option value="Table3">Reason 3</option>
        <option value="Table4">Other Reason</option>
</select>

<table id="Table1"><tr><td>#1#</td></tr></table>

<table id="Table2"><tr><td>#2#</td></tr></table> 

... etc ...

【讨论】：

像魅力一样工作。非常感谢你，Diodeus =]