récupérer la valeur d'une liste déroulante dynamique [Trucs & Astuces]

**grinder59** · 22/01/2006, 16h21

Salut,

sur mon application, je génère une liste dynamique via Ajax. Cette liste s'affiche dans un select tout simple, mais je n'arrive pas à récupérer la valeur de la ligne sélectionnée dans mon select.

Quelqu'un aurait une idée?

remarque : après avoir affiché la liste dans mon select, lorsque j'édite le source, mon select ne contient pas d'options, c'est pour cela que le traditionnel :

Code :

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

document.getElementById('liste').options[document.getElementById('liste').selectedIndex].value

ne fonctionne pas.

Merci

**javatwister** · 22/01/2006, 16h23

bref, tu veux récupérer la valeur d'une option qui n'existe pas?

bon courage;

**grinder59** · 22/01/2006, 16h35

c'est pas normal que les options ne s'affichent pas dans ma source ?

**javatwister** · 22/01/2006, 16h55

si la liste est créée dynamiquement par js, si! mais il n'empêche que la liste doit avoir un id et souvent un name, et chaque option une valeur; c'est peut-être un de ces paramètres que tu ne parviens pas à récupérer;

**grinder59** · 22/01/2006, 17h01

Ma liste est déclarée de la façon suivante. y'a un souci dans cette déclaration?

Code :

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

<select name=results size=13 style="width:519px"></select>

**javatwister** · 22/01/2006, 17h05

il faut vérifier si oui ou non des options ont été ajoutées à ce "cadre vide";

**grinder59** · 22/01/2006, 17h12

après le passage du script Ajax, dans le source y'a rien, par contre j'ai des résultats affiché dans le select.

**grinder59** · 22/01/2006, 18h32

OK, j'ai contourné le problème. Voici ma solution pour ceux que cela peut intéresser. L'utilisation d'un select pour afficher les résultats n'est pas une bonne solution. il faut lui préférer un <div id=nom> dans lequel on pourra mettre en forme ses données simplement, par exemple en plaçant des liens sur chacune des lignes.

En tous cas, merci pour ton aide twister :-)

**javatwister** · 22/01/2006, 19h09

d'accord avec toi pour la gestion de listes par div, ou par ul/li, mais attention, la balise select n'était pour rien dans ton problème:
d'ailleurs, as-tu essayé un alert du genre:

Code :

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

1
2
3
4
5
6
7
8
var l=document.getElementById('liste').options;
var aff="";
 
for(i = 0;i != l.length;i++){
aff+=l[i].value+"\n";
};
 
alert(aff);

??

en tout cas, comprends bien qu'une requête serveur javascript ne modifiera pas la source de ton document, même si la réponse amène des bouleversements considérables; c'est tout le principe de dhtml...

**siddh** · 23/01/2006, 02h04

en fait c est un bug dans ie seulement, on ne peut pas ajouter dynamiquement des options dans un select avec un innerHTML.

Si on veut le faire, il faut passer par des new Options.

Avec xhr ca peut etre fastidieux.

Du coup pour ie, il faut mettre un div et c est dans ce div qu'on fait le innerHTML du select complet avec ses options

**grinder59** · 23/01/2006, 15h06

Bon autant j'ai pu me débrouiller en substituant une liste à un id, autant j'aime pas rester sur un échec et ne pas comprendre.

voici ma page web affichant le formulaire:

Code :

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

1
2
3
4
5
6
7
8
 
  <body>
    <form name=f>
      <select id=selection size=10 style="width:200px"></select><br>
      <input type=button name=b1 value=chercher onClick="chercher();">
      <input type=button name=b2 value=afficher onClick="afficher();">
    </form>
  </body>

le script chercher lance une recherche SELECT champs1, champs2 FROM table

et voici comment je traite la réponse :

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
 
function handleHttpResponse(){
  while (document.f.selection.length > 0){
    document.f.selection.options[0] = null;
  }
  if (http.readyState == 4){
 
    var tableau = http.Responsetext.split('+++');
    for (i=0;i<tableau.length;i++){
      var tableau2 = tableau[i].split('---');
      newoption = new Option(tableau2[1],tableau2[2],false,false);
      if (tableau2[0] > 0){
        document.f.selection.options[document.f.selection.length] = newoption;
      }
    }
  }
}

si je tente d'afficher (avec le bout de script de twister) la valeur sélectionnée dans la liste dynamique générée via Ajax, ça marche pas...

pourquoi?

Merci

**siddh** · 23/01/2006, 15h24

c est pas Responsetext mais responseText

**grinder59** · 23/01/2006, 16h25

non, ce n'est pas l'affichage dans le select qui pose problème.
mais l'utilisation du bouton afficher qui exécute le code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function afficher(){
  var l=document.getElementById('selection').options; 
  var aff=""; 
 
  for(i = 0;i != l.length;i++){ 
    aff+=l[i].value+"\n"; 
  } 
 
  alert(aff);
}

**siddh** · 23/01/2006, 16h32

et quel est le probleme ?

**Matthieu2000** · 23/01/2006, 16h35

id + name...

**grinder59** · 23/01/2006, 16h44

oui, j'ai viré le id... désolé.

Le problème est que lorsque je tente d'affiche la valeur de la ligne sélectionnée dans la liste via le bouton afficher, mon pop up est vide...

**siddh** · 23/01/2006, 16h49

Code :

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

1
2
3
 
liste = document.getElementById('selection'); 
alert(liste.options[liste.selectedIndex]);

**Matthieu2000** · 23/01/2006, 16h57

quelle est l'erreur?
le message est null ou la valeur est vide?

Code :

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

1
2
3
4
5
6
7
8
9
10
function afficher(){ 
  var l=document.getElementById('selection').options; 
  var aff=""; 
 
  for(i = 0;i < l.length;i++){ 
    aff+="valeur:"+l[i].value+"texte:"+l[i].text+"+"\n"; 
  } 
 
  alert(aff); 
}

**grinder59** · 23/01/2006, 17h14

le pop up est vide...

j'ai refait ma fonction afficher de cette façon :

Code :

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

1
2
3
4
5
 
function afficher(){
  liste = document.getElementById('selection'); 
  alert(liste.options[liste.selectedIndex]);
}

et maintenant ça m'affiche [object].

Par contre, si je fait :
alert(liste.options[liste.selectedIndex].value);
le pop up est de nouveau vide

**Matthieu2000** · 23/01/2006, 17h24

-> les valeurs entrées sont vides!!!

récupérer la valeur d'une liste déroulante dynamique [Trucs & Astuces]

JavaScript

Discussions similaires

Partager

Partager