Question

我有一个下拉列表，其中包含选项-A，B，C，D。我想根据下拉列表中的选择隐藏其他输入字段。

如果用户选择A，我可以成功隐藏字段。如果用户选择A或B，我不知道如何隐藏字段。

工作代码：

$('#lockForm select[name="Key"]').change(function () {
            if ($('#lockForm select[name="Key"] option:selected').val() == 'A') {
                $('.hidden').hide();
            } else {
                $('.hidden').show();
            }
        });

<form:form method="post" id="lockForm">
        <div class="plselect">
            <form:select path="Key">
            <form:option value="NONE" label="------- Select One -------" />
            <form:options items="${List}" itemValue="Code" itemLabel="Desc"/>
            </form:select>
        </div>
</form:form>

Answer 1

您可以通过告诉脚本要隐藏哪些元素以及选项选项上显示的内容来获得完全控制权。您可以通过以下方式向选项元素添加数据来实现：

function showHide(e) {
    var selectedOption = $(this).find('option:selected');
    $( selectedOption.data('hide') ).hide();
    $( selectedOption.data('show') ).show();
};
$('select')
    .on('change', showHide)
    .trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <select>
        <option data-hide=".user-input" data-show=".user-input-a" value="A">show A</option>
        <option data-hide=".user-input" data-show=".user-input-b" value="B">show B</option>
        <option data-hide=".user-input" data-show=".user-input-c" value="C">show C</option>
        <option data-hide=".user-input" data-show=".user-input-d" value="D">show D</option>
        <option data-hide=".user-input" data-show=".user-input-a,.user-input-d" value="AD">show A and D</option>
        <option data-hide=".user-input" data-show="" value="">hide all</option>
        <option data-hide="" data-show=".user-input" value="ABCD">show all</option>
    </select>
</p>
<p class="user-input user-input-a">
    A - any content
</p>
<p class="user-input user-input-b">
    B - any content
</p>
<p class="user-input user-input-c">
    C - any content
</p>
<p class="user-input user-input-d">
    D - any content
</p>

这样您就可以在页面上的任何选择中使用它，无需再更改Javascript代码，只需在HTML中添加属性。

Playground上的相同代码。

Answer 2

您可以在if语句中使用OR进行两次检查：

if ($('#lockForm select[name="Key"] option:selected').val() == 'A' || '#lockForm select[name="Key"] option:selected').val() == 'B' )

你可以通过说

来进一步清理它

var selectedOption = $('#lockForm select[name="Key"] option:selected').val();
...
if (selectedOption == 'A' || selectedOption == 'B' )

下拉列表中的多个选择应该执行相同的操作 - jQuery

2 个答案: