0

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

我想要在下拉列表中添加更多“值”，因此当从列表中选择一个选项时，它还可以显示存储在列表中的一些文本或其他一些信息。现在我可以返回所选选项的值 (.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>
4

1 回答 1

0

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

<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 -> 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"));
   });
};
于 2013-09-03T12:40:24.357 回答