JQuery kullanarak seçenekleri seçmek için ek veri ekleme

Umarım çok basit bir soru.

Bunun <select>gibi olağan kutum var

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

Seçilen değeri (kullanarak $("#select").val()) ve seçilen öğenin görüntüleme değerini (kullanarak) alabilirim $("#select :selected").text().

Ancak <option>etikete nasıl ek bir değer gibi kaydedebilirim ? Gibi bir şey yapmak <option value="3.1" value2="3.2">other</option>ve value2özniteliğin değerini almak istiyorum (ki bu örnekte 3.2 olurdu).

HTML İşaretlemesi

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

Bunu burada jQuery kullanarak çalışan bir örnek olarak görün : http://jsfiddle.net/GsdCj/1/
Bunu burada düz JavaScript kullanarak çalışan bir örnek olarak görün: http://jsfiddle.net/GsdCj/2/

HTML5'teki veri özniteliklerini kullanarak , sözdizimsel olarak geçerli bir şekilde jQuery'den kolayca erişilebilen öğelere ekstra veri ekleyebilirsiniz.

Bana göre yeni bir özellik mi yaratmak istiyorsunuz? İstiyor musun

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

Bunu yapmak için yapabilirsin

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

Ve sonra onu almak için

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

Geçerli bir kod olmayacak, ama sanırım bu işi yapıyor.

Sorunuzun ne olabileceğini düşündüğümden iki örnek verdim:

http://jsfiddle.net/grdn4/

Ek değerler depolamak için buna göz atın. Diğer değeri depolamak için veri özelliklerini kullanır:

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

HTML / JSP İşaretlemesi:

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

JQUERY KODU: Etkinlik: değişiklik

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

Libelle.val () veya libelle.text () öğesine sahip olmak

Seçeneklerde başka bir değer saklamak için:

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