Question

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

我想要的是显示表格＆＃34;默认＆＃34;是选择了某些选项（在这种情况下除了＆＃34;禁止上诉＆＃34;或者＃34;禁止上诉（西班牙语）＆＃34;以外的所有选项，我希望表格＆＃34; unban＆＃34;被显示只有在禁止上诉或禁止上诉（西班牙语）被选为最短和最简单的方式。

我知道可以使用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中使用它;否则，其他形式的额外选择将导致问题。

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

Answer 2

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

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

根据选择显示表格/表格

2 个答案: