根据选择显示表格/表格答案

【问题标题】：Show table/form based on selection根据选择显示表格/表格
【发布时间】：2015-01-18 22:36:01
【问题描述】：

我知道这里有这样的问题，但我找不到适合我的答案。

我想要显示“默认”表单是选择了某些选项（在这种情况下，除了“禁止上诉”或“禁止上诉（西班牙语）”之外的所有内容，我希望只有在禁止时才显示“取消禁止”表单上诉或禁止上诉（西班牙语）被选为最短和最简单的方法。

我知道使用 JQuery 或 Javascript 是可能的

这是我的代码：

<select>
    <option value="Ban Appeal" selected="selected"><-- Choose Topic --></option>
    <option value="Ban Appeal">Ban Appeal</option>
    <option value="Ban Appeal (Spanish)">Ban Appeal (Spanish)</option>
    <option value="Bug Report">Bug Report</option>
    <option value="Hacker Report">Hacker Report</option>
    <option value="Staff Application">Staff Application</option>
    <option value="Staff Complaint">Staff Complaint</option>
    <option value="English">English</option>
    <option value="Spanish">Spanish</option>
    <option value="Suggestion">Suggestion</option>
</select>

<form name="default" id="default" style="display:none"> <!-- Template for every option but Unban/Spanish Unban -->
<table>
<!-- Leaving out everything in here because it's a lot -->
</table>
</form>

<form name="unban" id="unban" style="display:none"> <!-- Template for unban/Spanish unban -->
<table>
    <tr>
    <!-- Leaving out everything in here because it's a lot. -->
    </tr>
</table>
</form>

【问题讨论】：

标签： javascript php jquery forms selection

【解决方案1】：

使用 jQuery，您可以在选择更改时添加一个函数。然后，检查它具有哪个值并相应地显示或隐藏表单，如下所示：

$(document).ready(function(){             // you probably have a document-ready function already
    $('select').change(function(){        // onchange event
        switch ($(this).val()) {          // check the value
            case 'no-select':
                $('form').hide();
                break;
            case 'Ban Appeal':
            case 'Ban Appeal (Spanish)': 
                $('form#unban').show();
                $('form#default').hide();
                break;
            default:
                $('form#default').show();
                $('form#unban').hide();
        }
    }).trigger('change');                 // trigger the change event to make it work
                                          // directly when the DOM is loaded
});

您也应该考虑给select 一个id 并在JavaScript 中使用它；否则其他形式的额外选择会导致问题。

如果以后您想添加更多表单或选项，我希望清楚如何扩展这个小 sn-p。

【讨论】：

谢谢 - 我将 select 更改为 #topic（选择 id/name），但是当页面加载时，它会立即显示 Ban Appeal 表单，即使它是在 "”，而如果没有选择任何主题，我不想显示任何内容
@Prophettt 这是因为“选择主题”选项具有值“禁止上诉”。将其更改为“no-select”或类似的内容，并在 JavaScript 的 switch 中添加一个案例。
没意识到 - 但感谢您更新您的回复并告诉我！它现在完美运行。谢谢

【解决方案2】：

即使之前的答案也能按预期工作，只是稍微短一点：

$(function(){
    $('select').on('change', function(){
        var indexAppeal = !this.value.indexOf('Ban Appeal');
        $('#default').toggle(indexAppeal);
        $('#unban').toggle(!indexAppeal);
    }).change();
});

【讨论】：