Manter pares de valores-chave juntos em HTML <select/> com jQuery?

Question

Dado um select com múltiplas opções em jQuery.

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

Como a chave deve ser armazenada e recuperada?

O ID pode ser um local OK, mas não seria garantido como único se eu tivesse vários valores de compartilhamento de seleção (e outros cenários).

Obrigado

e no espírito do 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

Como Lucas disse, o atributo value é o que você precisa.Usando seu código, ficaria mais ou menos assim (adicionei um atributo id ao select para ajustá-lo):

$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 permite obter o valor usando o método val().Usando-o na tag select você obtém o valor da opção atualmente selecionada.

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

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

Por precaução, o método .each percorre todos os elementos que a consulta correspondeu.

Answer 2

O HTML <option> tag possui um atributo chamado "valor", onde você pode armazenar sua chave.

por exemplo.:

<option value=1>Jason</option>

Não sei como isso funcionará com o jQuery (não o uso), mas espero que seja útil mesmo assim.

Answer 3

Se você estiver usando HTML5, poderá usar um atributo de dados personalizado.Ficaria assim:

$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

Então, para obter a chave selecionada, você poderia fazer:

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

Ou se estiver usando XHTML, você pode criar um namespace personalizado.

Como você diz que as chaves podem ser repetidas, usar o atributo value provavelmente não é uma opção, pois você não seria capaz de dizer qual das diferentes opções com o mesmo valor foi selecionada na postagem do formulário.