Wat is de beste methode om opties toe te voegen aan een <select>
van een JavaScript object met behulp van jQuery?
Ik'ben op zoek naar iets dat ik niet'een plugin nodig om te doen, maar ik zou ook geïnteresseerd zijn in de plugins die er zijn.
Dit is wat ik heb gedaan:
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
Een schone/simpele oplossing:
Dit is een opgeschoonde en vereenvoudigde versie van matdumsa's:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Veranderingen ten opzichte van matdumsa's: (1) de close tag verwijderd voor de optie binnen append() en (2) de eigenschappen/attributen verplaatst naar een map als de tweede parameter van append().
Hetzelfde als andere antwoorden, in jQuery mode:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
Als je geen oude IE versies hoeft te ondersteunen, is het gebruik van de Option
constructor duidelijk de juiste weg, een leesbare en efficiënte oplossing:
$(new Option('myText', 'val')).appendTo('#mySelect');
Het is gelijkwaardig in functionaliteit aan, maar schoner dan:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
Ik heb zoiets gemaakt, het laden van een dropdown item via Ajax. Het antwoord hierboven is ook acceptabel, maar het is altijd goed om zo min mogelijk DOM modificatie te hebben voor betere performance.
Dus in plaats van elk item binnen een lus toe te voegen is het beter om items binnen een lus te verzamelen en het toe te voegen zodra het'is voltooid.
$(data).each(function(){
... Collect items
})
Voeg het toe,
$('#select_id').append(items);
of nog beter
$('#select_id').html(items);