1

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

<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 代码是强制性的，国籍不是强制性的。现在在下拉选择的基础上，我想显示这些字段。

问候布拉杰什

4

3 回答 3

0

您必须在您检查索引或根据该索引/值检查值时编写下拉更改事件，您将执行您想要的操作。意味着您可以根据您的要求显示。

于 2012-07-20T12:51:36.533 回答
0

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

$('#myButton').on('click', function() {
    $('.non-mandatory').toggle();
});
于 2012-07-20T12:52:15.657 回答
0

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

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

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

希望有帮助

于 2012-07-20T12:53:58.753 回答