javascript - 根据选择显示表格/表格

Question

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

我想要的是显示表单“默认”是选择了某些选项(在这种情况下，除了“Ban Appeal”或“Ban Appeal(西类牙语)”之外的所有内容，我希望仅在 Ban 时才显示表单“unban”上诉或禁令上诉(西类牙语)是选择最短、最简单的方式。

我知道使用 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>

Answer 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 中使用它；否则其他表单中的额外选择会导致问题。

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