Manter pares de valores-chave juntos em HTML <select/> com jQuery?
-
09-06-2019 - |
Pergunta
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");
Solução
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.
Outras dicas
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.
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.