Comment ajouter des options à un contrôle DropDownList à l’aide de jQuery ?

Question

Comme le dit la question, comment puis-je ajouter une nouvelle option à un contrôle DropDownList à l’aide de jQuery ?

Merci

Answer 1

Sans utiliser des plugins supplémentaires,

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

Si vous aviez beaucoup d'options, ou ce code doit être exécuté très souvent, alors vous devriez regarder dans l'utilisation d'un DocumentFragment au lieu de modifier le DOM plusieurs fois inutilement. Pour seulement une poignée d'options, je dirais que c'est pas la peine.

------------------------------- Ajouté --------------------------------

DocumentFragment est une bonne option pour l'amélioration de la vitesse, mais nous ne pouvons pas créer des options de l'élément à l'aide de document.createElement('option') depuis IE6 et IE7 ne sont pas de la soutenir.

Ce que nous pouvons faire, c'est créer une nouvelle sélectionner l'élément, puis ajouter toutes les options. Une fois la boucle terminée, ajouter à DOM objet.

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

De cette façon, nous allons modifier le DOM pour une seule fois!

Answer 2

Sans plug-ins, cela peut être plus facile sans utiliser autant jQuery, au lieu de cela va un peu plus old school :

Si vous souhaitez spécifier si l’option a) est la valeur par défaut sélectionné valeur et b) il faut choisir maintenant, vous pouvez passer dans deux autres paramètres :

Answer 3

Avec le plugin : jQuery boîte de sélection. Vous pouvez faire ceci :

Answer 4

Vous pouvez effacer votre liste déroulante d’abord $('#DropDownQuality').empty();

J’ai eu mon contrôleur MVC retourner une liste de sélection avec qu’un seul élément.

Answer 5

Solution de Pease Remarque @Phrogz ne fonctionne pas dans IE 8 tandis que @nickf travaille dans tous les principaux navigateurs. Une autre approche consiste :