Добавление дополнительных данных для выбора параметров с помощью 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).

Ответ 1

Разметка 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.

Ответ 2

Мне кажется, что вы хотите создать новый атрибут? Вы хотите

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

Чтобы сделать это, вы можете сделать

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

И затем, чтобы получить его, вы можете использовать

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

Это не будет действительный код, но я думаю, что он выполняет эту работу.

Ответ 3

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

http://jsfiddle.net/grdn4/

Проверьте это, чтобы сохранить дополнительные значения. Он использует атрибуты данных для хранения другого значения:

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

Ответ 4

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>

КОД СОКРАЩЕНИЯ: Событие: изменение

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

Чтобы иметь элемент libelle.val() или libelle.text()

Ответ 5

Чтобы сохранить другое значение в опциях выбора:

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