Adicionando dados adicionais para selecionar opções usando o jQuery

Pergunta muito simples, espero.

Eu tenho a <select>caixa habitual como esta

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

Posso obter o valor selecionado (usando $("#select").val()) e o valor de exibição do item selecionado (usando $("#select :selected").text().

Mas como posso armazenar como um valor adicional na <option>tag? Eu gostaria de poder fazer algo parecido <option value="3.1" value2="3.2">other</option>e obter o valor do value2atributo (que seria 3,2 no exemplo).

Marcação 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>

Código

// 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');

Veja isso como uma amostra de trabalho usando jQuery aqui: http://jsfiddle.net/GsdCj/1/
Veja isso como uma amostra de trabalho usando JavaScript simples aqui: http://jsfiddle.net/GsdCj/2/

Usando atributos de dados do HTML5, você pode adicionar dados extras aos elementos de uma maneira sintaticamente válida, que também é facilmente acessível no jQuery.

Para mim, parece que você deseja criar um novo atributo? Você quer

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

Para fazer isso, você pode fazer

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

E então, para recuperá-lo, você pode usar

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

Não será um código válido, mas acho que funciona.

Fiz dois exemplos do que acho que sua pergunta pode ser:

http://jsfiddle.net/grdn4/

Verifique isso para armazenar valores adicionais. Ele usa atributos de dados para armazenar o outro valor:

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

Marcação HTML / JSP:

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

CÓDIGO JQUERY: Evento: alteração

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

Para ter um elemento libelle.val () ou libelle.text ()

Para armazenar outro valor nas opções selecionadas:

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