Hvad er den bedste metode til at tilføje indstillinger til et <select>
fra et JavaScript-objekt ved hjælp af jQuery?
I'm leder efter noget, som jeg ikke behøver et plugin til at gøre, men jeg ville også være interesseret i de plugins, der er derude.
Dette er hvad jeg gjorde:
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
En ren/enkelt løsning:
Dette er en renset og forenklet version af matdumsa's:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Ændringer fra matdumsa's: (1) fjernet close-tag for indstillingen inde i append() og (2) flyttet egenskaberne/attributterne ind i et map som den anden parameter i append().
Hvis du ikke behøver at understøtte gamle IE-versioner, er det helt klart bedst at bruge Option
-konstruktøren, en læsbar og effektiv løsning:
$(new Option('myText', 'val')).appendTo('#mySelect');
Den svarer i funktionalitet til, men er renere end:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
Jeg har lavet noget som dette, indlæsning af et dropdown-element via Ajax. Svaret ovenfor er også acceptabelt, men det er altid godt at have så lidt DOM-modifikation som muligt for bedre ydeevne.
Så i stedet for at tilføje hvert element inde i en løkke er det bedre at samle elementer inden for en løkke og tilføje det, når det er afsluttet.
$(data).each(function(){
... Collect items
})
Tilføj det,
$('#select_id').append(items);
eller endnu bedre
$('#select_id').html(items);