Ποια είναι η καλύτερη μέθοδος για την προσθήκη επιλογών σε ένα <select>
από ένα αντικείμενο JavaScript χρησιμοποιώντας την jQuery;
Ψάχνω για κάτι που δεν χρειάζομαι ένα πρόσθετο για να το κάνω, αλλά θα με ενδιέφεραν και τα πρόσθετα που υπάρχουν εκεί έξω.
Αυτό είναι αυτό που έκανα:
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
Μια καθαρή/απλή λύση:
Αυτή είναι μια καθαρισμένη και απλουστευμένη εκδοχή του matdumsa's:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
Αλλαγές από το matdumsa's: (1) αφαιρέθηκε η ετικέτα close για την επιλογή μέσα στην append() και (2) μεταφέρθηκαν οι ιδιότητες/προσόντα σε έναν χάρτη ως δεύτερη παράμετρος της append().
Το ίδιο με τις άλλες απαντήσεις, με τον τρόπο της jQuery:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
Αν δεν χρειάζεται να υποστηρίζετε παλιές εκδόσεις του IE, η χρήση του κατασκευαστή Option
είναι σαφώς ο σωστός τρόπος, μια ευανάγνωστη και αποτελεσματική λύση:
$(new Option('myText', 'val')).appendTo('#mySelect');
Είναι ισοδύναμη σε λειτουργικότητα με, αλλά πιο καθαρή από:
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
Έχω κάνει κάτι τέτοιο, φόρτωση ενός αναπτυσσόμενου στοιχείου μέσω Ajax. Η παραπάνω απάντηση είναι επίσης αποδεκτή, αλλά είναι πάντα καλό να έχουμε όσο το δυνατόν λιγότερες τροποποιήσεις στο DOM για καλύτερες επιδόσεις.
Έτσι, αντί να προσθέσετε κάθε στοιχείο μέσα σε ένα βρόχο είναι καλύτερο να συλλέγετε στοιχεία μέσα σε ένα βρόχο και να το προσαρτάτε μόλις ολοκληρωθεί's.
$(data).each(function(){
... Collect items
})
Προσαρτήστε το,
$('#select_id').append(items);
ή ακόμα καλύτερα
$('#select_id').html(items);