switch statement - Alternative to if, else if, else if, else if, etc in javascript - Stack Overflow

admin管理员组

文章数量:1026989

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?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";
}

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";
}

• javascript
• switch-statement
• if-statement

Share Improve this question Follow edited Nov 29, 2011 at 1:43 tekknolagi 11k2626 gold badges7979 silver badges126126 bronze badges asked Nov 29, 2011 at 1:16 K GrollK Groll 51822 gold badges88 silver badges1818 bronze badges 10

• 3 What about switch? – David Rodrigues Commented Nov 29, 2011 at 1:17
• 1 I'd format your HTML and such so that you won't need special cases for everything. – Blender Commented Nov 29, 2011 at 1:18
• I must agree with Blender's comment. If your structure is well done you shouldn't need the if-elses or a switch statement. – Stephen P Commented Nov 29, 2011 at 1:23
• 1 Seems to me that in the example code given the only thing changing in each case is the index into the .options collection, so whether you use a switch or keep the if/else if/else if structure the line to select the appropriate option is the only thing you need in each case - the other three lines can be moved up to before the first if (or before the switch if you, well...switch to that). – nnnnnn Commented Nov 29, 2011 at 1:26
• How would I do that? It's just one select field. – K Groll Commented Nov 29, 2011 at 1:29

 |  Show 5 more comments

7 Answers 7

Sorted by: Reset to default 10

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";
}

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;
}

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";

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;
}

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

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]();

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;

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?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";
}

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";
}

• javascript
• switch-statement
• if-statement

Share Improve this question Follow edited Nov 29, 2011 at 1:43 tekknolagi 11k2626 gold badges7979 silver badges126126 bronze badges asked Nov 29, 2011 at 1:16 K GrollK Groll 51822 gold badges88 silver badges1818 bronze badges 10

• 3 What about switch? – David Rodrigues Commented Nov 29, 2011 at 1:17
• 1 I'd format your HTML and such so that you won't need special cases for everything. – Blender Commented Nov 29, 2011 at 1:18
• I must agree with Blender's comment. If your structure is well done you shouldn't need the if-elses or a switch statement. – Stephen P Commented Nov 29, 2011 at 1:23
• 1 Seems to me that in the example code given the only thing changing in each case is the index into the .options collection, so whether you use a switch or keep the if/else if/else if structure the line to select the appropriate option is the only thing you need in each case - the other three lines can be moved up to before the first if (or before the switch if you, well...switch to that). – nnnnnn Commented Nov 29, 2011 at 1:26
• How would I do that? It's just one select field. – K Groll Commented Nov 29, 2011 at 1:29

 |  Show 5 more comments

7 Answers 7

Sorted by: Reset to default 10

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";
}

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;
}

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";

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;
}

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

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]();

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;

本文标签： switch statementAlternative to ifelse ifetc in javascriptStack Overflow