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;

目前我可以提取价值=＆＃39; x＆＃39;对于一个选项，但我需要更多的值与选项相关联。我可以将所有三个值分成一个，然后使用字符串函数将它们分开，但这看起来很讨厌。

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就是这样的（value =数组的索引位置）：

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

依旧......

在option元素中引用多个值

3 个答案: