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

Question

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

$(".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");
    }
});

但在这种情况下，一旦选择了除默认选项之外的任何选项，隐藏元素将显示。

有什么想法可以更好地解决这个问题吗？ 非常感谢任何建议。

谢谢！

Answer 1

你在这一行上有额外的括号，不应该在那里：

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

Answer 2

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

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

评论＃2 -

如果你的HTML没有加载到Ajax中，你应该用$(function(){ /* code here */ });包装它$(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");
        }
    });
});

看一下我的小提琴 ，看一个有效的例子。