引用多个值的选项元素

Question

类似问题Can an Option in a Select tag carry multiple values?内 - 除了我要引用的值在JavaScript

总结一下：
我想在一个选择框选定的项目返回多个值 - 所以我想是这样的：

<SELECT id='selectList'> 
    <OPTION value1="a" value2="b" value3="c">OPTION 1</OPTION> 
    <OPTION value1="d" value2="e" value3="f">OPTION 2</OPTION> 
</SELECT> 

我那么想获得所选项目的值：

var sel = document.getElementById('selectList'); 
selValue1 = sel.options(sel.selectedIndex).value1; 
selValue2 = sel.options(sel.selectedIndex).value2; 
selValue3 = sel.options(sel.selectedIndex).value3; 

目前我可以拉取value ='x'作为选项，但我需要更多的值才能与选项关联。我可能可以将所有三个值分隔成一个，然后使用字符串函数将它们分开，但这看起来很讨厌。

Answer 1

我认为你正在寻找attributes属性：

var sel = document.getElementById('selectList'); 

selValue1 = sel.options[sel.selectedIndex].attributes.value1.value; 

这里是一个jsFiddle demonstrating how to extract these values。

Answer 2

无法理解此原因。当然，您可以使用自定义数据属性，如https://developer.mozilla.org/en-US/docs/HTML/Global_attributes#attr-data- *或简单地使用普通的旧get/setAttribute（）。

一个更好的解决办法是，要像

var optionValues={ option1: [a,b,c], option2 [d,e,f] } 

的对象，因此阵列的分辨率是易如反掌：

var values=optionValues[selectedOption]; 

所以没有必要存储在附加数据DOM。

Answer 3

我会把所有的值放入JS中的对象数组中，并将该数组的每个位置作为SELECT元素中的OPTIONS值。

所以，我的选择会是类似的东西（数组的值=索引位置）：

<SELECT id='selectList'> 
    <OPTION value="0">OPTION 1</OPTION> 
    <OPTION value="1">OPTION 2</OPTION> 
</SELECT> 

和数组的一个例子：

var array = [ 
      { 
      "value1": "a", 
      "value2": "b", 
      "value3": "c" 
      }, 
      { 
      "value1": "d", 
      "value2": "e", 
      "value3": "f" 
      } 
     ]; 

array[0] 
Object {value1: "a", value2: "b", value3: "c"} 
array[1] 
Object {value1: "d", value2: "e", value3: "f"} 

你怎么可以得到每个对象：

var sel = document.getElementById('selectList'); 
var selectedValue = sel.options[e.selectedIndex].value; 

当选择的值是第一个选项（值= 0）：

array[selectedValue] 
Object {value1: "a", value2: "b", value3: "c"} 

array[selectedValue].value1 
"a" 
array[selectedValue].value2 
"b" 

当选择的值是第一个选项（值= 1）：

array[selectedValue].value1 
"d" 
array[selectedValue].value2 
"e" 

等等...