CODEWITHSUNDEEP
javascripthtml
Jur
Jur

Reputation: 1

Show hide div depending multiple values

I am trying to compare this.value to multiple options, how do I do this? I can't figure out the syntax to compare this.value against more options...

window.onload = function(){
    var elem = document.getElementById("country-list");
    elem.onchange = function(){
        var hiddenDiv = document.getElementById("showMe");
        hiddenDiv.style.display = (this.value != "option1","option2") ? "none" : "block";
    };    
}

Upvotes: 0

Views: 52

Answers (3)

Vasi G.
Vasi G.

Reputation: 171

If you still want to use Conditional (ternary) operator you can try this:

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// Equivalent to:

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

Upvotes: 0

Noah Jay
Noah Jay

Reputation: 21

If you want to specify a different behavior for different values this.value can take, you probably want to use a switch statement (often referred to as "a switch-case").

In your example, I would go with something like

elem.onchange = function(){
    var hiddenDiv = document.getElementById("showMe");
    var newDisplay = "";
    switch (this.value) {
        case "option1":
        case "option2":
            newDisplay = "block";
            break;
        ...
        default:
            newDisplay = "none";
    }
    hiddenDiv.style.display = newDisplay;
};

Upvotes: 0

AbbasEbadian
AbbasEbadian

Reputation: 693

You need to put an "and" operator for this .

hiddenDiv.style.display = (this.value != "option1" && this.value != "option2") ? "none":"block";

Upvotes: 1

Related Questions