Javascript Js-组合两个dropbox值

这段代码是有效的（我知道这是使用switch的错误方法），但似乎我处理这个问题的方法是错误的。我有两个下拉菜单框在我的网页上的价值观，可以混合任何方式

e、 g每个框中有2个值：

• 1 | 1
• 1 | 2
• 2 | 1
• 2 | 2

但它可能会有20个值，因此代码的增长速度会非常快。我必须知道用户在这两个框中选择了什么以及它们的组合，因为它将显示关于这两个框以及它们的组合的数据

简言之，我的问题是；有没有最佳的解决方案？我希望页面加载速度快，易于维护

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

---

}

为什么不将每个值的信息存储在如下对象中：

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

现在只需要维护对象，不需要switch语句。不过，将来这些信息最好存储在json文件或数据库中

如果每个dropbox具有基于所选数量的唯一信息，请使用2个对象：

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

---

它们将以类似方式访问。现在，如果顺序和组合相关，也许你应该重新评估应用程序的设计。

我们可以用更少的开销编写相同的代码：

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

---

我是这样做的。更改下拉框中的值，以便。就像1,2,4,8,16,32,64。。。等等

所以item1和item1是1+1=2，item2和item1是2+1=3。这样我就不必为1 | 1而烦恼了

---

也许不是最好的解决办法，但我现在很满意

我想你最好写一个函数，像这样写出数字：不是我想做的。所有的“一和一”。。。就是这样，我知道所有的选择都是可行的。但谢谢你的快速回答。：）我的代码有点误导..=/。试着把它想象成一个菜谱发现者。你有两种配料，你想知道第三种。所以，如果你从盒子里选择“比萨面团”和“番茄酱”，你会得到像“火腿”一样的答案。例如比萨饼面团-番茄酱火腿虾沙拉。。。或比萨饼面团-火腿番茄酱虾沙拉。。。等等。我想解释一下如何制作“比萨面团”和“番茄酱”，然后我会列出很多其他适合的配料。太好了！我仍然存在的一个问题是，我必须有“1 | 2”和“2 | 1”，即使它是相同的。像“番茄酱|比萨面团”和“比萨面团|番茄酱”，你也有解决办法吗？请记住，它不一定是开关，我只想快速，易于维护。