Dodanie dodatkowych danych w celu wybrania opcji za pomocą jQuery

Mam nadzieję, że bardzo proste pytanie.

Mam takie zwykłe <select>pudełko

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

Mogę uzyskać wybraną wartość (używając $("#select").val()) i wyświetlaną wartość wybranego elementu (używając $("#select :selected").text().

Ale jak mogę przechowywać dodatkową wartość w <option>tagu? Chciałbym móc zrobić coś podobnego <option value="3.1" value2="3.2">other</option>i uzyskać wartość value2atrybutu (w przykładzie byłoby to 3,2).

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

Kod

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

Zobacz to jako działający przykład przy użyciu jQuery tutaj: http://jsfiddle.net/GsdCj/1/
Zobacz to jako działający przykład przy użyciu zwykłego JavaScript tutaj: http://jsfiddle.net/GsdCj/2/

Używając atrybutów danych z HTML5, możesz dodawać dodatkowe dane do elementów w sposób poprawny składniowo, który jest również łatwo dostępny z jQuery.

Dla mnie brzmi to tak, jakbyś chciał utworzyć nowy atrybut? Czy chcesz

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

Aby to zrobić, możesz to zrobić

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

A następnie, aby go odzyskać, możesz użyć

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

To nie będzie prawidłowy kod, ale myślę, że spełnia swoje zadanie.

Zrobiłem dwa przykłady na podstawie tego, co myślę, że twoje pytanie może brzmieć:

http://jsfiddle.net/grdn4/

Sprawdź to, aby zapisać dodatkowe wartości. Używa atrybutów danych do przechowywania innej wartości:

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

Znaczniki HTML / JSP:

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

KOD ZAMÓWIENIA: Wydarzenie: zmiana

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

Aby mieć element libelle.val () lub libelle.text ()

Aby zapisać inną wartość w wybranych opcjach:

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