Js - 结合两个保管箱值

Question

此代码有效（我知道这是使用 switch 的错误方法），但我似乎以错误的方式解决了这个问题。我的网页上有两个下拉菜单框，其中的值可以随意混合。

例如，每个框中有 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"}

}

Answer 1

为什么不像这样将每个值的信息存储在一个对象中：

//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 文件或数据库中。

如果每个保管箱都有基于所选数字的唯一信息，请使用 2 个对象：

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

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

Answer 2

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

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

Answer 3

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

因此 item1 和 item1 将是 1+1 = 2，而 item2 和 item1 将是 2+1 = 3。这样我就不必为 1|1 而烦恼...

也许不是最好的解决方案，但我现在很满意。

Js - 结合两个保管箱值

Js - Combinding two dropbox values

javascript

webpage

function

drop-down-menu

例如，每个框中有 2 个值：