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