如果选择了多个选项，则使用 jQuery 显示隐藏的表单元素

Using jQuery to display hidden form elements if multiple options are selected?

本文关键字：显示 jQuery 隐藏 元素 表单 选择 选项 如果      更新时间：2023-09-26

我在联系表单中有一个下拉选项，如果选择了任何一个选项，我想显示一些额外的表单元素。否则，应隐藏其他元素。我已经能够使用单个选项使用以下代码来使其工作：

$(".hidden-section").hide();
$("#contact-form select").change(function(){
    if ($(this).val() == "extra options trigger one") {
        $(".hidden-section").slideDown("fast");
    } else {
        $(".hidden-section").slideUp("fast");
    }
});

不幸的是，如果选择两个选项中的任何一个，我无法弄清楚如何让它工作。我能够让jQuery工作的唯一方法是：

$(".hidden-section").hide();
$("#contact-form select").change(function(){
    if ($(this).val() == "extra options trigger one") || ($(this).val() == "extra options trigger two") {
        $(".hidden-section").slideDown("fast");
    } else {
        $(".hidden-section").slideUp("fast");
    }
});

但在这种情况下，一旦选择了默认选项以外的任何选项，隐藏元素就会显示出来。

关于解决这个问题的更好方法的任何想法？非常感谢任何建议。

谢谢！

这一行有多余的括号，不应该在那里：

if ($(this).val() == "extra options trigger one") || ($(this).val() == "extra options trigger two") {

应该是：

if ($(this).val() == "extra options trigger one" || $(this).val() == "extra options trigger two") {

也就是说，if()语句的条件需要完全包含在外括号中，因此：

if (condition1 || condition2)          // valid
if ((condition1) || (condition2))      // valid
if (condition1) || (condition2)        // NOT valid

让我对您的代码添加一些注释。

首先 - 不要使用$(".hidden-section").hide(); - 你应该将display:none添加到.hidden-section CSS。原因是对于某些人来说，网络连接很慢，直到他们的浏览器运行 javascript hide需要一些时间。在此期间，它将可见。他们会经历闪烁——有些东西会出现并突然消失。

评论 #2 -

如果你的HTML没有在Ajax中加载，你应该用$(function(){ /* code here */ });包装它 - 因为这只会在整个页面准备就绪时运行JavaScript。当您的JavaScript引用HTML内容时，这是必需的。

评论 #3 -

您的代码将难以维护 - 想象一下还有第三个选项需要额外的字段。

你最好在每个需要额外字段的选项上添加一个类，例如<option class="requires-extra">Option 2</option>，然后你的JavaScript更短。 

$(function(){
    $("select").change(function(){
        var $requiresExtra = $(this).find("option:selected").hasClass("requires-extra");
        if ( $requiresExtra ) {
            $(".hidden-section").slideDown("fast");
        } else {
            $(".hidden-section").slideUp("fast");
        }
    });
});

有关工作示例，请参阅我的小提琴。

相关文章：