selectのoption要素のプロパティについて

Question

コンボボックスを選択した際にvalueではないプロパティ内に入っている値を取得したいです。

<select id="comb"> <option value="1" data="0">1</option> <option value="2" data="0">2</option> <option value="3" data="1">3</option> </select>

この様な場合にjavascriptでdataの値を取得する方法があれば教えていただきたいです。
valueやtextについては取得の方法は分かっています。
すみませんがよろしくお願いします。

Answer 1

できればdata-形式の方がよいですね

<script>
window.onload=function(){
  var opt=document.getElementById("comb").options;
  for(var i=0;i<opt.length;i++){
    console.log(opt[i].getAttribute("data-val"));
  }
}
</script>

<select id="comb">
<option value="1" data-val="0">1</option>
<option value="2" data-val="0">2</option>
<option value="3" data-val="1">3</option>
</select>

ついでに

最近のブラウザならdata-*データはdatasetでアクセスできます

console.log(opt[i].dataset["val"]);

ただし、ユーザー環境に依存するので、できれば
setAttribute、getAttributeで処理する方が確実です

Comments

[退会済みユーザー]

ありがとうございます！とても参考になりました。
今後は名前の付け方に気をつけます。

Answer 2

とりあえずdataはyambejpさんが書いているようにdata-「好きな文字列」の形にするべきです。それならHTML5の要素の属性として正しい形式になります。

<select id="comb">
<option value="1" data-hoge="0">1</option>
<option value="2" data-hoge="0">2</option>
<option value="3" data-hoge="1">3</option>
</select> 

それでjavascriptはjQuery使えばこうです。

  $(function(){
    $("#comb").on("change",function(){
     console.log($('#comb option:selected').data('hoge'));
    });
   });

Comments

[退会済みユーザー]

ありがとうございます！
同じことをしようと思っても、複数方法があるので難しいですね。
こちらの方法で上手くいったのですが、他に教えていただいた方法も試して練習してみます。

[yambejp]

jQueryを利用する気があるのであればこちらのほうがすっきりするでしょうね
（jQueryを毛嫌いする人も多いので・・・）