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

Question

I've got a drop-down selection in a contact form, and want to display a few additional form elements if either of options are selected. Otherwise, the additional elements should be hidden. I've been able to get this working with a single option, with the following code:

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

Unfortunately, I can't figure out how to get this to work if either of two options are selected. The only way I've been able to get the jQuery even working is this:

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

But in this case, the hidden elements will show up once any option other than the default is selected.

Any ideas on a better way to go about this? Would much appreciate any advice.

Thanks!

Answer 1

You've got extra parentheses on this line that shouldn't be there:

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

Should be:

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

That is, the if() statement's condition needs to be entirely enclosed within the outer parentheses, so:

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

Answer 2

Let me add some comments on your code.

First - don't use $(".hidden-section").hide(); - you should add display:none to the .hidden-section CSS. The reasons is that for some people the network connection is slow, and until their browser will run the javascript for hide it will take some time. During this time it will be visible. They will experience a flicker - something will appear and suddenly disappear.

Comment #2 -

If your HTML does not load in Ajax, you should wrap it with $(function(){ /* code here */ }); - as this will run the JavaScript only when the entire page is ready. This is required when you JavaScript refers to HTML content.

Comment #3 -

Your code will be hard to maintain - imagine there's a third option that requires extra fields.

You are better off adding a class on each option that requires extra fields, for example <option class="requires-extra">Option 2</option> and then your JavaScript is shorter.

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

See my fiddle for a working example.