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からも簡単にアクセスできる構文的に有効な方法で要素にデータを追加できます。

私には、新しい属性を作成したいようですが？欲しいですか

<option value="2" value2="somethingElse">...

これを行うには、行うことができます

$(your selector).attr('value2', 'the value');

そして、それを取得するために、あなたは使うことができます

$(your selector).attr('value2')

それは有効なコードにはなりませんが、私はそれがうまくいくと思います。

私はあなたの質問が何であると私が思うかもしれないものから2つの例を作りました：

http://jsfiddle.net/grdn4/

追加の値を保存するためにこれをチェックしてください。データ属性を使用して、他の値を格納します。

http://jsfiddle.net/27qJP/1/

HTML / JSPマークアップ：

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

JQUERY CODE：イベント：変更

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

要素libelle.val（）またはlibelle.text（）を持つには

選択オプションに別の値を保存するには：

$("#select").append('<option value="4">another</option>')