Js - 组合两个Dropbox值

时间:2016-01-12 15:34:03

标签: javascript function drop-down-menu webpage

这段代码有效(我知道这是使用开关的错误方法),但似乎我正以错误的方式接近这个问题。我的网页上有两个dropdownmenu框,无论如何都可以混合使用。

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

}

3 个答案:

答案 0 :(得分:0)

为什么不将信息存储在对象中的每个值上,如下所示:

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

现在您只需要维护对象而不需要切换语句。将来,这些信息最好存储在json文件或数据库中。

如果每个保管箱都有基于所选号码的唯一信息,请使用2个对象:

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

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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