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

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

<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代码：
国籍：

以此表单为例，国家名称和国家ISD代码是强制性的，国籍不是强制性的。现在，在下拉选择的基础上，我想显示这些字段

问候

---

Brajesh

您必须在其中写入下拉更改事件，检查索引或根据您将要执行的索引/值检查值。这意味着您可以根据您的要求进行显示。

为每个非强制性字段分配一个类

非强制性

。然后将事件处理程序附加到按钮以切换是否n-必填字段如下所示：

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

---

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

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

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

希望有帮助