Додавання додаткових даних для вибору параметрів за допомогою jQuery

Дуже просте запитання, сподіваюся.

У мене є звичайний такий <select>ящик

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

Я можу отримати вибране значення (за допомогою $("#select").val()) та відображене значення вибраного елемента (за допомогою $("#select :selected").text().

Але як я можу зберігати як <option>тег додаткове значення в тезі? Мені б хотілося зробити щось на кшталт <option value="3.1" value2="3.2">other</option>і отримати значення value2атрибута (що було б 3,2 у прикладі).

Розмітка 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>

Код

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

Дивіться це як робочий зразок за допомогою jQuery тут: http://jsfiddle.net/GsdCj/1/
Дивіться це як робочий зразок, використовуючи звичайний JavaScript тут: http://jsfiddle.net/GsdCj/2/

Використовуючи атрибути даних з HTML5, ви можете додавати додаткові дані до елементів у синтаксично правильному способі, який також легко доступний з jQuery.

Для мене це звучить так, як ви хочете створити новий атрибут? Хочеш?

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

Для цього можна зробити

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

А потім, щоб отримати його, ви можете використовувати

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

Це не буде дійсним кодом, але, мабуть, це робить свою роботу.

Я зробив два приклади з того, що, на мою думку, може бути вашим питанням:

http://jsfiddle.net/grdn4/

Перевірте це, щоб зберегти додаткові значення. Він використовує атрибути даних для зберігання іншого значення:

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

Розмітка HTML / JSP:

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

КОД JQUERY: Подія: зміна

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

Мати елемент libelle.val () або libelle.text ()

Щоб зберегти інше значення у вибраних опціях:

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