Récupérer Valeur d'une liste déroulante

Version imprimable

20/08/2008, 11h30
coeurdange

Récupérer Valeur d'une liste déroulante
Bonjour, j'ai un problème en javascript et je n'arrive pas le résoudre, pourriez_vous m'aider, merci d'avance.

Dans ma page html j'ai une liste déroulante que j'appelle 2 fois dans ma page. Initialement je ne l'appelais qu'une seule fois et j'avais mis un id pour l'identifier. Comme ca je pouvais récupérer la valeur sélectionnée en faisant ::
Code:

1 2 sel_tri = document.getElementById('tri'); tri = sel_tri.options[sel_tri.selectedIndex].value;
Comme maintenant la liste est présente deux fois dans la page je ne peux plus utiliser id (soucis de validité html) donc j'ai changé en mettant un

Code:

<select name="tri">

Je n'arrive cependant pas à récupérer la valeur sélectionnée avec

Code:

document.getElementsByTagName('tri')

J'ai essayé avec document.getElementsByTagName('tri').value mais ca ne marche pas
Comment faire???
20/08/2008, 11h32
Matthieu2000

le tag est select
20/08/2008, 11h35
coeurdange

J"'ai d'autres select également dans la page mais je ne fais pas de traitement dessus avec cette fonction JS, il n'y a pas de possibilité d'identifier avec un nom ??
20/08/2008, 11h35
Matthieu2000

Citation:

getElementsByName()
20/08/2008, 11h41
coeurdange

Ok et pour récupérer la valeur qui a été sélectionnée je fais

Code:

document.getElementsByName('tri').value???
20/08/2008, 11h43
Auteur

Citation:

Envoyé par Matthieu2000

Code:

getElementsByName()

Firefox considère cette méthode dépréciée :?

coeurdange : utilise

Code:

var tabSelect = document.getElementsByTagName("select");

puis fais une boucle pour rechercher les select ayant l'attribut name=="tri"
20/08/2008, 11h55
coeurdange

et pour récupérer la valeur de la ligne sélectionnée????

Citation:

Envoyé par coeurdange

Je peux pas faire cela :

var tabSelect = document.getElementsByTagName("select");

car j'ai d'autres listes déroulantes dans ma page a part les 2 la...Si je fais ca il risque de ne pas me sélectionner la bonne liste, non????

Effectivement tu auras dans un tableau tous les select de la page. Mais j'ai bien précisé :

Citation:

puis fais une boucle pour rechercher les select ayant l'attribut name=="tri"

Exemple complet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!--
function fonctionTest()
{
  var tabSelect = document.getElementsByTagName("select");
  var i, j;
  var tri = new Array();
 
  for (i=0, j=0; i<tabSelect.length; i++)
  {
 
     if (tabSelect[i].name=="tri")
     {
        tri[j] = tabSelect[i].options[tabSelect[i].selectedIndex].value; //valeur de l'option placée dans le tableau tri
        j++; //incrément de l'index
     }
  }
 
alert(tri); //affichage des options sélectionnées
}
//-->
</script>
 
</head>
 
<body>
 
Liste 1  (name==autreSelect)<br/>
<select name="autreSelect">
  <option value="Liste 1 option 1">option 1</option>
  <option value="Liste 1 option 2">option 2</option>
  <option value="Liste 1 option 3">option 3</option>
  <option value="Liste 1 option 4">option 4</option>  
</select>
 
<br/><br/><br/>
Liste 2 (name==tri)<br/>
<select name="tri">
  <option value="Liste 2 option 1">option 1</option>
  <option value="Liste 2option 2">option 2</option>
  <option value="Liste 2option 3">option 3</option>
  <option value="Liste 2option 4">option 4</option>  
</select>
 
<br/><br/><br/>
Liste 3 (name==tri)<br/>
<select name="tri">
  <option value="Liste 3 option 1">option 1</option>
  <option value="Liste 3 option 2">option 2</option>
  <option value="Liste 3 option 3">option 3</option>
  <option value="Liste 3 option 4">option 4</option>  
</select>
 
<br/><br/><br/>
Liste 4 (name==autreSelect)<br/>
<select name="autreSelect">
  <option value="Liste 4 option 1">option 1</option>
  <option value="Liste 4 option 2">option 2</option>
  <option value="Liste 4 option 3">option 3</option>
  <option value="Liste 4 option 4">option 4</option>  
</select>
 
<br/><br/>
<input type="button" value="afficher votre sélection" onclick="fonctionTest()" />
 
</body>
</html>

Le message d'alert affichera les options sélectionnées des listes 2 et 3.

20/08/2008, 13h47
coeurdange

Merci

Un grand merci pour votre réponse qui me va parfaitement, MERCI