根据选择显示 table/form

Question

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

我想要的是显示表单 "default" 是否选择了某些选项（在这种情况下，除了 "Ban Appeal" 或 "Ban Appeal (Spanish)"，我希望表单 "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 您可以在 select 更改时添加一个函数。然后，检查它有哪个值并相应地显示或隐藏表单，如下所示：

$(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 中使用它；否则其他形式的额外 select 会导致问题。

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

Answer 2

即使之前的答案更短一点也能按预期工作：

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

根据选择显示 table/form

Show table/form based on selection

javascript

php

forms

jquery

selection