Добавление дополнительных данных для выбора параметров с помощью jQuery

Question

Очень простой вопрос, я надеюсь.

У меня есть обычный <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).

Answer 1

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> 

Код

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

С помощью data attributes из HTML5 вы можете добавлять дополнительные данные в элементы синтаксически-допустимым образом, которые также легко доступны из jQuery.

Answer 2

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

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

Answer 3

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

http://jsfiddle.net/grdn4/

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

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

Answer 4

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

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

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

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

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

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

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

Answer 5

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 КОД: Событие: изменение

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

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