Aggiunta di dati aggiuntivi per selezionare le opzioni utilizzando jQuery

Spero molto semplice domanda.

Ho la solita <select>scatola come questa

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

Posso ottenere il valore selezionato (usando $("#select").val()) e il valore di visualizzazione dell'articolo selezionato (usando $("#select :selected").text().

Ma come posso memorizzare come un valore aggiuntivo nel <option>tag? Vorrei essere in grado di fare qualcosa di simile <option value="3.1" value2="3.2">other</option>e ottenere il valore value2dell'attributo (che sarebbe 3.2 nell'esempio).

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

Codice

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

Guarda come un esempio funzionante usando jQuery qui: http://jsfiddle.net/GsdCj/1/
Vedi questo come un esempio funzionante usando JavaScript semplice qui: http://jsfiddle.net/GsdCj/2/

Utilizzando gli attributi di dati da HTML5 è possibile aggiungere ulteriori dati agli elementi in modo sintatticamente valido che sia anche facilmente accessibile da jQuery.

Per me, sembra che tu voglia creare un nuovo attributo? Vuoi

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

Per fare questo, puoi farlo

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

E poi per recuperarlo, puoi usare

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

Non sarà un codice valido, ma immagino che funzioni bene.

Ho fatto due esempi da quello che penso possa essere la tua domanda:

http://jsfiddle.net/grdn4/

Dai un'occhiata per memorizzare ulteriori valori. Utilizza gli attributi di dati per memorizzare l'altro valore:

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

Markup HTML / JSP:

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

CODICE JQUERY: Evento: modifica

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

Per avere un elemento libelle.val () o libelle.text ()

Per memorizzare un altro valore nelle opzioni selezionate:

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