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

基本的に、次のようにdata属性をオプションにアタッチできます。

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

編集:私のソリューションを実装したい場合は、選択タグから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 に答える