Question

我有一个下拉设置，用户输入一个输入值，选择一个计算从下拉列表中执行该数字，然后一个函数显示结果。

我想要的是在下拉列表中添加更多“值”，因此当从列表中选择一个选项时，它也可以显示存储在列表中的一些文本或其他一些信息。现在我可以返回所选选项的值（.value）并使用选项的名称（.text）来执行功能，但是我可以在以后使用的每个选项中添加更多数据吗？

<html>
<head>
<script language="JavaScript">

function myfunction(form)
{
var i = parseFloat(form.Input.value, 10);
var e = document.getElementById("calculationList");
var strUser = e.options[e.selectedIndex].value;
form.Output.value = strUser*i;
}

</script>
</head>

<body>
<form>
Input Number:
<INPUT NAME="Input" SIZE=15>

Make a selection:
<select id="calculationList" onchange="myfunction(form)">
<option></option>
<option value="2">Double It</option>
<option value="3">Triple It</option>
<option value="10">Multiply It By ten</option>
</select>

Output Number:
<INPUT NAME="Output" SIZE=15>

</FORM>
</body>
</html>

Answer 1

基本上，您可以将数据属性附加到您的选项中：

<select id="calculationList">
<option></option>
<option value="2" data-aaa="10">Double It</option>
<option value="3" data-aaa="20">Triple It</option>
<option value="10" data-aaa="30">Multiply It By ten</option>
</select>

然后获取属性的内容：

var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
    console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});

jsfiddle - ＆gt; http://jsfiddle.net/pzKrr/

编辑：如果要实现我的解决方案，请从 select 标记中删除 onchange =“myfunction（form）”。之后，在 myfunction

之后添加以下代码

window.onload = function() {
   var dropdown = document.getElementById("calculationList");
   dropdown.addEventListener("change", function() {
      console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
   });
};

下拉选项的更多属性

1 个答案: