Agregar datos adicionales para seleccionar opciones usando jQuery

Pregunta muy simple, espero.

Tengo la <select>caja habitual como esta

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

Puedo obtener el valor seleccionado (usando $("#select").val()) y el valor de visualización del elemento seleccionado (usando $("#select :selected").text().

Pero, ¿cómo puedo almacenar como un valor adicional en la <option>etiqueta? Me gustaría poder hacer algo así <option value="3.1" value2="3.2">other</option>y obtener el valor del value2atributo (que sería 3.2 en el ejemplo).

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

Vea esto como una muestra de trabajo usando jQuery aquí: http://jsfiddle.net/GsdCj/1/
Vea esto como una muestra de trabajo usando JavaScript simple aquí: http://jsfiddle.net/GsdCj/2/

Al utilizar los atributos de datos de HTML5, puede agregar datos adicionales a los elementos de una manera sintácticamente válida a la que también se puede acceder fácilmente desde jQuery.

Para mí, ¿parece que quieres crear un nuevo atributo? Quieres

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

Para hacer esto, puedes hacer

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

Y luego para recuperarlo, puedes usar

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

No va a ser un código válido, pero supongo que hace el trabajo.

Hice dos ejemplos de lo que creo que tu pregunta podría ser:

http://jsfiddle.net/grdn4/

Mira esto para almacenar valores adicionales. Utiliza atributos de datos para almacenar el otro valor:

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

Marcado 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: cambio

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

Para tener un elemento libelle.val () o libelle.text ()

Para almacenar otro valor en las opciones seleccionadas:

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