Comment ajouter des options à une DropDownList à l'aide de jQuery?

Comme le dit la question, comment ajouter une nouvelle option à une DropDownList à l'aide de jQuery?

Merci

Sans utiliser de 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 que ce code devait être exécuté très fréquemment, vous devriez envisager d'utiliser un DocumentFragment au lieu de modifier le DOM plusieurs fois inutilement. Pour seulement quelques options, je dirais que cela n'en vaut pas la peine.

------------------------------- Ajoutée ------------------ --------------

DocumentFragmentest une bonne option pour l'amélioration de la vitesse, mais nous ne pouvons pas créer d'élément d'option en utilisant document.createElement('option')puisque IE6 et IE7 ne le prennent pas en charge.

Ce que nous pouvons faire, c'est créer un nouvel élément de sélection, puis ajouter toutes les options. Une fois la boucle terminée, ajoutez-la à l'objet DOM réel.

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 ne modifierons le DOM qu'une seule fois!

Sans plug-in, cela peut être plus facile sans utiliser autant de jQuery, au lieu d'aller un peu plus à l'ancienne:

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

Si vous souhaitez spécifier si l'option a) est la valeur sélectionnée par défaut et b) doit être sélectionnée maintenant, vous pouvez passer deux paramètres supplémentaires:

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

Avec le plugin: Boîte de sélection jQuery . Tu peux le faire:

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false); 

Vous voudrez peut-être d'abord effacer votre DropDown $ ('# DropDownQuality'). Empty ();

J'ai eu mon contrôleur dans MVC renvoyer une liste de sélection avec un seul élément.

$('#DropDownQuality').append(
        $('<option></option>').val(data[0].Value).html(data[0].Text));    

Ajouter un élément à la liste au début

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

Ajouter un élément à la liste à la fin

$('<option value="6">Java Script</option>').appendTo("#ddlList");

Opération de liste déroulante commune (Get, Set, Add, Remove) à l'aide de jQuery

Veuillez noter que la solution de @ Phrogz ne fonctionne pas dans IE 8 tandis que celle de @ nickf fonctionne dans tous les principaux navigateurs. Une autre approche est:

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("<option/>").attr("value", val).text(text));
});

Vous pouvez utiliser directement

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

-> Ici, vous pouvez utiliser une chaîne directe

Et aussi, utilisez .prepend () pour ajouter l'option au début de la liste d'options. http://api.jquery.com/prepend/

en utilisant jquery, vous pouvez utiliser

      this.$('select#myid').append('<option>newvalue</option>');

où " myid " est l' id de la liste déroulante et newvalue est le texte que vous souhaitez insérer.

Je devais ajouter autant d'options aux listes déroulantes qu'il y avait de listes déroulantes sur ma page. Je l'ai donc utilisé de cette façon:

function myAppender(obj, value, text){
    obj.append($('<option></option>').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $('[id*="ddlPosition_"]').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $('[id*="ddlPosition_"]').each(function() {
        var myId = this.id.split('_')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
        }
        $('[id*="ddlPosition_'+myId+'"]').val(builder);
        builder++;
    });
});

Cela a créé dynamiquement des listes déroulantes avec des valeurs comme 1 à n, et a automatiquement sélectionné la valeur de l'ordre dans lequel la liste déroulante était (c.-à-d. Que la deuxième liste déroulante a obtenu "2" dans la case, etc.).

C'était ridicule que je ne puisse pas utiliser thisou this.Objectou $.objou quelque chose comme ça dans mon 2e .each(), cependant --- j'ai dû en fait obtenir l'ID spécifique de cet objet, puis saisir et transmettre cet objet entier à ma fonction avant qu'il ne soit ajouté. Heureusement, l'ID de ma liste déroulante a été séparée par un "_" et j'ai pu la saisir. Je ne pense pas que j'aurais dû le faire, mais cela me donnait des exceptions jQuery dans le cas contraire. Quelque chose que les autres aux prises avec ce que j'étais pourrait aimer savoir.

Imaginons que votre réponse soit "successData". Il contient une liste que vous devez ajouter comme options dans un menu déroulant.

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

Cela fonctionnerait pour vous ....

essayez cette fonction:

function addtoselect(param,value){
    $('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}