0

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

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

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

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

谢谢！

4

2 回答 2

2

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

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
于 2012-08-10T21:17:46.007 回答
0

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

首先 - 不要使用$(".hidden-section").hide();- 你应该添加display:none到.hidden-sectionCSS。原因是对于某些人来说网络连接很慢，并且在他们的浏览器运行 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");
        }
    });
});

请参阅我的小提琴以获取工作示例。

于 2012-08-10T21:41:15.280 回答