Хранить пары ключ-значение вместе в HTML <select /> с помощью jQuery?

Question

Учитывая выбор с несколькими вариантами в JQuery.

$select = $("<select></select>");
$select.append("<option>Jason</option>") //Key = 1
       .append("<option>John</option>") //Key = 32
       .append("<option>Paul</option>") //Key = 423

Как хранить и извлекать ключ?

Идентификатор может быть в порядке, но он не будет гарантированно уникальным, если у меня будет несколько значений общего доступа для выбора (и другие сценарии).

Спасибо

и в духе TMTOWTDI.

$option = $("<option></option>");
$select = $("<select></select>");
$select.addOption = function(value,text){
    $(this).append($("<option/>").val(value).text(text));
};

$select.append($option.val(1).text("Jason").clone())
       .append("<option value=32>John</option>")
       .append($("<option/>").val(423).text("Paul"))
       .addOption("321","Lenny");

Answer 1

Как сказал Лукас, вам нужен атрибут value. Используя ваш код, он будет выглядеть примерно так (я добавил атрибут id в select, чтобы он соответствовал):

$select = $('<select id="mySelect"></select>');
$select.append('<option value="1">Jason</option>') //Key = 1
   .append('<option value="32">John</option>') //Key = 32
   .append('<option value="423">Paul</option>') //Key = 423

jQuery позволяет получить значение с помощью метода val (). Используя его в теге select, вы получаете значение текущего выбранного параметра.

$( '#mySelect' ).val(); //Gets the value for the current selected option

$( '#mySelect > option' ).each( function( index, option ) {
    option.val(); //The value for each individual option
} );

На всякий случай метод .each проходит по всем элементам, к которым соответствует запрос.

Answer 2

Тег HTML <option> имеет атрибут «value», в котором вы можете хранить свой ключ.

например:.

<option value=1>Jason</option>

Я не знаю, как это будет работать с jQuery (я им не пользуюсь), но, тем не менее, надеюсь, что это полезно.

Answer 3

Если вы используете HTML5, вы можете использовать пользовательский атрибут данных . Это будет выглядеть так:

$select = $("<select></select>");
$select.append("<option data-key=\"1\">Jason</option>") //Key = 1
   .append("<option data-key=\"32\">John</option>") //Key = 32
   .append("<option data-key=\"423\">Paul</option>") //Key = 423

Затем, чтобы получить выбранный ключ, вы можете сделать:

var key = $('select option:selected').attr('data-key');

Или, если вы используете XHTML, вы можете создать собственное пространство имен.

Поскольку вы говорите, что ключи могут повторяться, использование атрибута value, вероятно, не вариант, поскольку тогда вы не сможете определить, какой из различных параметров с одинаковым значением был выбран в сообщении формы.