Comment ajouter des options à une liste déroulante en utilisant jQuery?

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

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

Si vous voulez 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 autres paramètres:

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

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

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

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

Mon contrôleur dans MVC a renvoyé 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) en utilisant jQuery

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

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

U peut 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 des options. http://api.jquery.com/prepend/

En utilisant jquery, vous pouvez utiliser

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

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

J'avais besoin d'ajouter autant d'options aux listes déroulantes qu'il y avait de listes déroulantes sur ma page. Donc je l'ai 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 configure dynamiquement les listes déroulantes avec des valeurs telles que 1 À n, et sélectionne automatiquement la valeur de l'ordre dans lequel la liste déroulante était (c'est-à-dire que la 2ème liste déroulante a "2" dans la boîte, etc.).

C'était ridicule que je ne puisse pas utiliser this ou this.Object ou {[3] } ou quelque chose comme ça dans mon 2ème .each(), bien que - - - j'ai dû obtenir l'ID spécifique de cet objet et ensuite prenez et passez cet objet entier à ma fonction avant qu'il ne soit ajouté. Heureusement, l'ID de ma liste déroulante a été séparé par un " _ " et je pouvais l'attraper. Je ne pense pas que j'aurais dû le faire, mais cela me donnait des exceptions jQuery autrement. Quelque chose que les autres aux prises avec ce que j'étais pourraient aimer savoir.

Essayez cette fonction:

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