web-dev-qa-db-fra.com

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

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

Merci

jqueryuser-interfacedrop-down-menu
290
flesh

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

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

DocumentFragment est 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') car IE6 et IE7 ne le prennent pas en charge.

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

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!

451
nickf

Sans plug-ins, cela peut être plus facile sans utiliser autant de jQuery, mais plutôt légèrement plus old-school:

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 ou non la valeur sélectionnée par défaut et si b) doit être sélectionnée maintenant, vous pouvez transmettre deux paramètres supplémentaires:

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

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);
13
cgreeno

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

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));
11
Har

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 dropdown commune (Get, Set, Add, Remove) en utilisant jQuery

7
Zakaria

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

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("&lt;option/&gt;").attr("value", val).text(text));
});
4
Marshal

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

3
Johan

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

3
Jay

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.

0
chopss

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++;
    });
});

Ces listes déroulantes étaient configurées de manière dynamique avec des valeurs telles que 1 à n et sélectionnaient automatiquement la valeur de l’ordre dans lequel la liste déroulante se trouvait (c’est-à-dire que la 2e liste déroulante obtenait "2" dans la zone, etc.).

C'était ridicule de ne pas pouvoir utiliser this ou this.Object ou $.obj ou quoi que ce soit de ce genre dans mon 2nd .each(), bien que --- je devais en réalité obtenir l'ID spécifique de cet objet et puis saisissez et passez cet objet entier à ma fonction avant qu'il ne soit ajouté. Heureusement, l'identifiant de ma liste déroulante était séparé par un "_" et je pouvais le saisir. Je ne pense pas que j'aurais dû le faire, mais il continuait à me donner des exceptions jQuery autrement. Quelque chose qui se débat avec ce que j'étais pourrait aimer savoir.

0
vapcguy