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

我在联系人表单中有一个下拉选择，如果选择了其中一个选项，我想显示一些额外的表单元素。否则，应隐藏其他元素。我已经能够通过以下代码使用单个选项实现此功能：

$(".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（）-您应该将
显示：无
添加到
隐藏部分
CSS。原因是，对于一些人来说，网络连接很慢，在他们的浏览器运行javascript for
hide
之前，这需要一些时间。在此期间，它将可见。他们会经历一种闪烁——有些东西会出现，然后突然消失

评论#2-

如果您的HTML没有在Ajax中加载，则应使用
$（function（）{/*code here*/}）将其包装起来-因为只有当整个页面准备就绪时，才会运行JavaScript。当JavaScript引用HTML内容时，这是必需的

评论#3-

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

您最好在每个需要额外字段的选项上添加一个类，例如
选项2
，这样您的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");
        }
    });
});

有关工作示例，请参见
 你能给我们看看markupGreat的一部分吗？谢谢！我必须使用第二个有效选项来实现这一点，将这两个条件都放在括号中。不过，它在那之后起作用了，所以最后一行是：如果（$（this.val（）=“额外选项触发一”）|；（$（this.val（）=“额外选项触发二”））不客气。不过，我很惊讶您需要内括号，如果没有内括号，它应该可以工作，因为它不是一个语法错误，并且可以做您想做的事情（因为
==
的优先级高于
|
）。关于您的注释：（1）使用
.hide（）
如果页面设计用于在浏览器中禁用JavaScript的用户（因为只有在有办法再次显示控件时，控件才会隐藏），那么在CSS中放置
display:none
就很有用了。（2） 如果脚本块位于它所处理的元素之后，则不需要document.ready，但OP在这方面没有问题，因为一个选项代码起作用。（3） 好建议，酷。我希望它不会给人留下太多批评的印象：它肯定是友好的建设性批评。。。