[解決済み] jQueryを使用して選択オプションに追加データを追加する

質問

簡単な質問ですが、よろしくお願いします。

私は、通常の <select> このようなボックス

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

選択された値を取得することができます( $("#select").val() ) と、選択された項目の表示値 ( $("#select :selected").text() .

しかし、どのようにすれば、追加の値のようなものを <option> タグを使用します。次のようなことができるようにしたいのです。 <option value="3.1" value2="3.2">other</option> の値を取得し value2 属性（この例では3.2）になります。

どのように解決するのですか？

HTMLマークアップ

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

コード

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

jQueryを使った動作サンプルとして、こちらをご覧ください。 http://jsfiddle.net/GsdCj/1/

プレーンなJavaScriptを使った動作サンプルとして、こちらをご覧ください。 http://jsfiddle.net/GsdCj/2/

を使用することで データ属性 HTML5では、構文的に妥当な方法で要素に追加のデータを追加することができ、jQueryからも簡単にアクセスできます。