Qual é o melhor método para adicionar opções a um <select>
de um objeto JavaScript utilizando jQuery?
I'estou procurando por algo que eu não'não preciso de um plugin para fazer, mas eu também estaria interessado nos plugins que estão por aí.
Isto foi o que eu fiz:
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
Uma solução limpa/simples:
Esta é uma versão limpa e simplificada versão de matdumsa's:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Mudanças de matdumsa's: (1) removeu a tag close para a opção dentro de append() e (2) moveu as propriedades/atributos para um mapa como o segundo parâmetro de append().
Se você não'não precisa suportar versões antigas do IE, utilizar o Construtor da opção é claramente o caminho a seguir, uma solução legível e eficiente:
$(new Option('myText', 'val')).appendTo('#mySelect');
It's equivalente em funcionalidade a, mas mais limpo do que:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
Eu fiz algo assim, carregando um item dropdown via Ajax. A resposta acima também é aceitável, mas é sempre bom ter o mínimo possível de modificações no DOM para um melhor desempenho.
Então, ao invés de adicionar cada item dentro de um loop, é melhor coletar itens dentro de um loop e anexá-lo assim que ele's estiver completo.
$(data).each(function(){
... Collect items
})
Anexe isso,
$('#select_id').append(items);
ou ainda melhor
$('#select_id').html(items);