Js - Combinding two dropbox values

Question

This code works(i know this is the wrong way to use switch), BUT it seems like I'm approaching this problem the wrong way. I have two dropdownmenu boxes on my webpage with values that can be mix anyhow.

e.g with 2 values in each box:

1|1
1|2
2|1
2|2

But it will be with perhaps 20 values, so it the code will grow quite fast. I have to know what the user have chosen in both boxes and the mix of them, cause it will present data regarding both boxes and the mix of them.

So in short my question is; is there any optimal solution of doing this? I want the page to load fast and be easy to maintain.

function solveit() {

//These are dropdownlist that will just send and index or value as text
var selectedIndex1 = document.getElementById("selectedIndex1").value; 
var selectedIndex2 = document.getElementById("selectedIndex2").value;

switch (selectedIndex1 + "|" + selectedIndex2){
case "1|1":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "1|2":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "1|3":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "1|4":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "1|5":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;


case "2|1":
    document.getElementById("IndexANDIndex").innerHTML = "Info about the two values"
    break;
case "2|2":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "2|3":
    document.getElementById("IndexANDIndex").innerHTML = "Info about the two values"
    break;
case "2|4":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "2|5":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;


case "3|1":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "3|2":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "3|3":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "3|4":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "3|5":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
//And so on... 

case "1|1":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "2|1":
    document.getElementById("IndexANDIndex").innerHTML = "Info about the two values"
    break;
case "3|1":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "4|1":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
case "5|1":
    document.getElementById("IndexANDIndex").innerHTML = "Information about the combination of them"
    break;
//And so on... 
default:
document.getElementById("IndexANDIndex").innerHTML = "NOTHING CHOOSEN"}

}

I guess you'd be much better off writing a function that spells out numbers like this: http://stackoverflow.com/questions/5529934/javascript-numbers-to-words — Lucas Rodrigues, Jan 12 '16 at 15:37
Not really what I want to do. All the "One and one"... Is just there so I know that all the choices works. But thanks for a fast answer. :) — Ron, Jan 12 '16 at 15:47

score 0 · Answer 1 · answered Jan 12 '16 at 16:17

Why not store your information on each value in an object like so:

//the key is the name of the dropdown value and the string stores your info
//Objects keys can be a number or string so now have flexibility too 
var valInfo = {
    '1': 'one',
    '2': 'two',
    '3': 'three',
    '4': 'four'
};

function info () {
    var one = document.getElementById("selectedIndex1").value; 
    var two = document.getElementById("selectedIndex2").value; 
    return valInfo[one] + ' ' + valInfo[two];
} //returns "one two"

Now you only need to maintain the object and no switch statement. In the future this information would be better stored in a json file or database though.

If each dropbox has unique info based on number chosen use 2 objects:

var dropDown1 = {
    '1': 'one',
    '2': 'two',
    '3': 'three',
    '4': 'four'
};
var dropDown2 = {
    '1': 'One',
    '2': 'Two',
    '3': 'Three',
    '4': 'Four'
};

They will be accessed similarly. Now if the order and combination are relevant, maybe you should reevaluate the design of the app.

My code was a bit misleading.. =/. Try to think of it as a recipe finder. You have two ingredients and you want to know a third. So if you choose "Pizza dough" and "tomato sauce" from the boxes, you will get like "ham" as an answer. E.g Pizza dough - Tomato Sauce Ham Shrimps Sallad... etc. or Pizza dough - Ham Tomato Sauce Shrimps Sallad... etc. So I will have like an explanation of how to make the "Pizza dough" and the "Tomato Sauce" then i will list alot of other ingredients that could fit. — Ron, Jan 17 '16 at 14:06

score 0 · Answer 2 · answered Jan 17 '16 at 19:24

We can write the same code with a lot less overhead:

function solveit() {
  //These are dropdownlist that will just send and index or value as text
  var selectedIndex1 = document.getElementById("selectedIndex1").value; 
  var selectedIndex2 = document.getElementById("selectedIndex2").value;

  document.getElementById("IndexANDIndex").innerHTML = getInfo(selectedIndex1 + "|" + selectedIndex2);
}

function getInfo(sel) {
  switch (sel){
    case "1|1": return "Information about the combination of them";
    case "1|2": return "Information about the combination of them";
    case "1|3": return "Information about the combination of them";
    case "1|4": return "Information about the combination of them";
    case "1|5": return "Information about the combination of them";

    case "2|1": return "Info about the two values";
    case "2|2": return "Information about the combination of them";
    case "2|3": return "Info about the two values";
    case "2|4": return "Information about the combination of them";
    case "2|5": return "Information about the combination of them";

    case "3|1": return "Information about the combination of them";
    case "3|2": return "Information about the combination of them";
    case "3|3": return "Information about the combination of them";
    case "3|4": return "Information about the combination of them";
    case "3|5": return "Information about the combination of them";

    //And so on... 

  }
  return "NOTHING CHOOSEN";
}

That's nice! One problem that I still have is that I has to have "1|2" and "2|1" even though it is the same. Like "Tomato sauce|Pizza dough" and "Pizza dough|Tomato sauce", do you have a solution for that also? Keep in mind that it doesn't have to be switch, I just want to be fast, and easy to maintain. — Ron, Jan 19 '16 at 00:09

score 0 · Accepted Answer · answered Mar 02 '16 at 21:17

I did it like this. Change values in the drop boxes so. It was like 1,2,4,8,16,32,64... and so on.

So item1 and item1 would be 1+1 = 2 and item2 and item1 would be 2+1 = 3. In that way I don't have to bother with 1|1...

Perhaps not the best solution, but I'm happy with it for now.

Js - Combinding two dropbox values

e.g with 2 values in each box:

3 Answers3