Discussion :

[calagan99]

Bonjour,

je suis en train de m'arracher les cheveux sur une chose qui me paraît pourtant simple : ajouter dynamiquement des options à une dropdownlist (asp.net) via JQuery.

Je fais la chose suivante :
- récupéation via "$.ajax" d'une liste d'objets contenant une seule propriété : Designation.
- je veux ajouter ces "Designation" comme option d'une dropdownlist

Si je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
for (var i = 0; i < colours.length; i++) {
        var val = colours[i];
        var text = colours[i];
        $('#ddlColour').addOption(val, text, false);
      }

Firebug me dit "AddOption" n'est pas une fonction...

J'ai essayé plusieurs choses dont :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$.each(colours, function (key, value) {
                         $('#ddlColour').append($("<option/>", {
                             value: key,
                             text: value
                         }));
                     });

mais là j'ai des item "object OBJECT" dans ma liste déroulante.

Quelle est la meilleure manière de procéder ?
Que représentent "key" et "value" dans la fonction ?

D'avance merci pour votre aide.

[Kaamo]

Pas sûr que addOption existe en jQuery !

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$.each(coulours, function (key, value) {
    $('#ddlColour').append($('<option>', { 
        value: value,
        text : value 
    }));
});

key étant l'indice du tableau

En pur Javascript, cela donne un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var options = document.getElementById('ddlColour').options;
for (var i=0; i < coulours.length; i++)
  options[options.length] = new Option(coulours[i], coulours[i]);

[calagan99]

Je m'en suis sorti de la manière suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var select = $("#ddlColour");
select.children().remove();                     
$(secteurs).each(function (index, item) {
    select.append($("<option>").val(item.Designation).text(item.Designation));
});

où désignation est le libellé de la couleur.

Merci pour la proposition et l'explication