Hinzufügen zusätzlicher Daten zur Auswahl von Optionen mit jQuery

Sehr einfache Frage, hoffe ich.

Ich habe die übliche <select>Box so

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

Ich kann den ausgewählten Wert (mithilfe von $("#select").val()) und den Anzeigewert des ausgewählten Elements (mithilfe von) abrufen $("#select :selected").text().

Aber wie kann ich einen zusätzlichen Wert im <option>Tag speichern ? Ich möchte in der Lage sein, so etwas zu tun <option value="3.1" value2="3.2">other</option>und den Wert des value2Attributs zu erhalten (im Beispiel wäre es 3.2).

HTML-Markup

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

Code

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

Sehen Sie dies als Arbeitsbeispiel mit jQuery hier: http://jsfiddle.net/GsdCj/1/
Sehen Sie dies als Arbeitsbeispiel mit einfachem JavaScript hier: http://jsfiddle.net/GsdCj/2/

Durch die Verwendung von Datenattributen von HTML5 können Sie zusätzliche Daten zu den Elementen in eine syntaktisch gültigen Weise hinzufügen , die auch leicht von jQuery ist.

Für mich klingt es so, als ob Sie ein neues Attribut erstellen möchten? Willst du

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

Um dies zu tun, können Sie tun

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

Und um es dann abzurufen, können Sie verwenden

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

Es wird kein gültiger Code sein, aber ich denke, es macht den Job.

Ich habe zwei Beispiele aus Ihrer Frage gemacht:

http://jsfiddle.net/grdn4/

Überprüfen Sie dies, um zusätzliche Werte zu speichern. Es verwendet Datenattribute, um den anderen Wert zu speichern:

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

HTML / JSP-Markup:

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

JQUERY CODE: Ereignis: Änderung

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

Ein Element libelle.val () oder libelle.text () haben

So speichern Sie einen anderen Wert in ausgewählten Optionen:

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