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

StackOverflow https://stackoverflow.com/questions/27219

  •  09-06-2019
  •  | 
  •  

Вопрос

Задан выбор с несколькими параметрами в jQuery. 

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

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

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

Спасибо

и в духе 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");
Это было полезно?

Решение

Как сказал Лукас, атрибут 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
} );

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

Другие советы

HTML - код <option> у тега есть атрибут под названием "value", в котором вы можете хранить свой ключ.

например ,:

<option value=1>Jason</option>

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

Если вы используете 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, вероятно, не вариант, поскольку тогда вы не смогли бы определить, какой из различных параметров с одинаковым значением был выбран в записи формы.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top