Discussion :

[sylvain257]

Bonjour,

Je cherche à peupler des champs déroulants d'un formulaire avec des données provenant d'une requête AJAX.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function SelectCollection(){; 
  $.ajax({
    url: monurl,
    type: 'GET',
    datatype: 'json',
    complete: function(res) {
        var record = res.responseJSON.records;
 
        for (const val of record) {
 
          $('.collection_selection').append($(document.createElement('option')).prop({
            value: val.id,
            text: val.nom
        }));
 
 
          }
        }
      })
    }

Le problème est que j'appelle cette fonction plusieurs fois dans mon code et je me retrouve systématiquement avec une liste déroulante avec des valeurs dupliquées.

Je me retrouve avec une liste déroulante peuplée :

option1
option2
option3
option1
option2
option3
...

et autant de fois que la fonction est appelée.

Comment faire pour peupler une liste déroulante (<select>) et éviter le comportement décrit plus haut ?

Merci pour vos retours,

Sylvain

[Chou-ette]

Bonjour,

Videz les options du select à la ligne 8 de votre bloc de code, juste avant de le remplir avec les options que vous venez de récupérer.

[sylvain257]

D'accord et ça se passe comment ?

J'ai jamais vraiment eu l'occasion de faire ce genre de chose, donc je patauge un peu....

Comme ça ?

Code :

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

document.getElementById('idDuSelect').options.length=0;

[ProgElecT]

Salut

Code :

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

document.getElementById('idDuSelect').length=0;

Pas besoin de préciser .options

[sylvain257]

Ok j'essaye ça. Merci :-)

[NoSmoking]

Bonjour,
de deux choses l'une, ou tu codes en jQuery ou en « vanilla » mais pas les deux, c'est ce que appelles familièrement du JavaScriptCrise

Il existe une méthode pour vider un élément de ses enfants : empty().

De même tu as dû mal appréhender la puissance de la méthode append().

Dernier point, si tu utilises jQuery pour sa méthode $ajax alors regarde du côté de l'API Fetch.