Question

我要求我有一个表格，其中某些字段是强制性的，有些则不是。我的表格中有下拉有两个条件，首先是“显示所有字段”，另一个是“仅显示必填字段”现在我想要做的是，当用户选择“显示所有字段”而不是显示所有字段时，当用户选择“仅显示必填字段”时，将只显示必填字段。

<form:form method="POST" action="addCountry.htm" commandName="countryForm" id="countryForm">
    <table>

    <tr>
        <td>Select fields:</td>
        <td align="center">
            <select name="fields">
                <option value="non mandatory">show all fields</option>
                <option value="mandatory">show only mandatory fields</option>
            </select>
        </td>
    </tr>

        <tr>
            <td>Country Name :</td>
            <td><form:input path="countryName"/>
            </td>
        </tr>
        <tr>
            <td>Country ISD Code  :</td>
            <td><form:textarea path="countryISDCode" />
            </td>
        </tr>
        <tr>
            <td>Nationality :</td>
            <td><form:textarea path="nationality"/></td>
        </tr>

        <tr>
            <td colspan="3"><input type="submit" value="submit"/></td>
        </tr>
    </table>
</form:form>

以此表格为例，其中国名和国家ISD代码是强制性的，国籍不是强制性的。现在，根据下拉选择，我想显示这些字段。

此致 Brajesh

Answer 1

您必须编写下拉更改事件，因为您检查索引或根据您将执行所需的索引/值检查值。意味着您可以根据自己的要求展示。

Answer 2

为每个非必填字段分配一个班级non-mandatory。然后将事件处理程序附加到按钮以切换是否显示非必填字段：

$('#myButton').on('click', function() {
    $('.non-mandatory').toggle();
});

Answer 3

您是否只想隐藏输入元素/控件或整个表格行？在任何一种情况下，您都可以将css类应用于相应的DOM元素，然后绑定下拉列表的onchange事件，以根据所选值处理隐藏和显示。

因此，如果您想要隐藏整个表格行，对于每个tr，您可以应用“强制”和“非强制”的CSS类，然后在您的javascript中，您可以执行以下操作：

$('#myDropdownlist').con('change', function() {
    if ($(this).val() === 'mandatory') {
        $('.nonMandatory').hide();
        $('.mandatory').show();
    } else {
        $('.nonMandatory').show();
        $('.mandatory').hide();            
    }
});

希望有所帮助

根据下拉值显示/隐藏表单元素

3 个答案: