CODEWITHSUNDEEP
javascriptswitch-statementif-statement
K Groll
K Groll

Reputation: 518

Alternative to if, else if, else if, else if, etc in javascript

I've got the following code which depending on a url parameter changes and then hides a select option on a form. ie www.example.com?type=images

Eventually there will be over 20 different parameters. I'd like to know of a better way than having a huge amount of if elses. Just an outline of how to do it is fine, I'm new to this, so I'd like to be able to take the answer and learn from it. Thanks.

var type = getURLparameter('type'); //from another function

if (type == "images"){
    var selectDiv =('divid');
    var selectField = ('selectid');
    document.getElementById(selectField).options[1].selected=true;
    document.getElementById(selectDiv).style.visibility="hidden";
}
else if (type == "pizza") {
    var selectDiv =('divid');
    var selectField = ('selectid');
    document.getElementById(selectField).options[2].selected=true;
    document.getElementById(selectDiv).style.visibility="hidden";
}
else (type == "cheese") {
    var selectDiv =('divid');
    var selectField = ('selectid');
    document.getElementById(selectField).options[3].selected=true;
    document.getElementById(selectDiv).style.visibility="hidden";
}

Upvotes: 2

Views: 5745

Answers (7)

Rich Bannon
Rich Bannon

Reputation: 1

I know this is a very old question, but wanted to offer an alternative solution, I like this approach because it's concise, while still being very easily readable

const type = getURLparameter('type'); //from another function
const images = type === 'images' && 1
const pizza = type === 'pizza' && 2
const cheese = type === 'cheese' && 3
const option = images || pizza || cheese

document.getElementById(selectField).options[option].selected=true;

Upvotes: 0

RightSaidFred
RightSaidFred

Reputation: 11327

Put them in an object and look up the one you need.

var type_table = {
    images: {
        div_id: 'somevalue',
        select_id: 'somevalue',
        option_index: 0
    },

    pizza: {
        div_id: 'somevalue',
        select_id: 'somevalue',
        option_index: 1
    },

    cheese: {
        div_id: 'somevalue',
        select_id: 'somevalue',
        option_index: 2
    }
};

then...

var the_type = type_table[ type ];

document.getElementById(the_type.select_id).options[the_type.option_index].selected=true;
document.getElementById(the_type.div_id).style.visibility="hidden";

If the IDs are actually all the same, then naturally you should cache those elements instead of reselecting them, and the only thing you'd need to store in the table would be the index number.

It sounds like the only unique part is the index. If so, do this:

var type_table = {
    images:0,
    pizza:1,
    cheese:2, // and so on
};

var the_div = document.getElementById('div_id');
var the_select = document.getElementById('select_id');

then inside the function that is running the code...

the_select.options[ type_table[ type ] ].selected=true;
the_div.style.visibility="hidden";

Upvotes: 4

Jeff Lauder
Jeff Lauder

Reputation: 1247

you could use an array of functions, similar to the ever popular dictionary solution in c#, 

var mySwitch={};
mySwitch['images'] = function(){ 
    var selectDiv =('divid');
    var selectField = ('selectid');
    document.getElementById(selectField).options[1].selected=true;
    document.getElementById(selectDiv).style.visibility="hidden";
};
mySwitch['pizza'] = function(){...};

then do 

mySwitch[type]();

Upvotes: 0

tekknolagi
tekknolagi

Reputation: 11022

maybe a switch statement would help you

http://www.tutorialspoint.com/javascript/javascript_switch_case.htm

also, set the selectDiv before everything to reduce the amount of code :)

switch(type) {
    case 'images':
        //blah
        break;
}

Upvotes: 3

jfriend00
jfriend00

Reputation: 707736

In the interest of not repeating code, I'd write your code like this with a lookup table for the index num and no repeated code for each option:

var typeNum = {
    images: 1,
    pizza: 2,
    cheese: 3
};

var type = getURLparameter('type');

if (type in typeNum) {
    document.getElementById('selectid').options[typeNum[type]].selected = true;
    document.getElementById('divid').style.visibility = "hidden";
}

Upvotes: 10

Godwin
Godwin

Reputation: 9937

document.getElementById(selectField).options[(type == "images" ? 1 : (type == "pizza" ? 2 : 3))].selected=true;
document.getElementById(selectDiv).style.visibility="hidden";

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78006

Use a switch:

var selectDiv   = document.getElementById('divid'), 
    selectField = document.getElementById('selectid');

switch(type){
    case "images":
        selectField.options[1].selected=true;
        selectDiv.style.visibility="hidden";
    break;

    case "pizza":
        selectField.options[2].selected=true;
        selectDiv.style.visibility="hidden";
    break;

    case "cheese":
        selectField.options[3].selected=true;
        selectDiv.style.visibility="hidden";
    break;
}

Upvotes: 6

Related Questions