lier une liste déroulante et un simple texte HTML

**gregolak** · 22/07/2006, 16h54

bonjour,

j'ai une liste déroulante avec des noms, et en-dessous
des infos supplémentaires sur la personne...

Je souhaterais que lorsqu'on sélectionne un nouveau nom
dans cette liste, les infos se rafraichissent (pas d'accès au
serveur, toutes les infos sont là au chargement de la page).

J'ai consulté la FAQ sur "comment lier 2 listes entre elles",
mais impossible de trouver un exemple sur 1 liste et un simple
texte HTML... Ca parait pourtant plus simple non ?

Voilà où j'en suis :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
 
<html><head><title>Test</title>
 
<script type="text/javascript">
 
<!--
   function rafraichirInfos() {
 
}
//-->
 
</script>
 
 
 
 
</head><body>
 
<form name="formulaire1" action="">
 
   <select name="choix" size="4" onChange="rafraichirInfos()">
      <option>Moliere</option>
      <option>Racine</option>
      <option>Corneille</option>
      <option>Hugo</option>
   </select>
 
</form>
 
 
 
   <div id="infos">
 
   Moliere Poquelin Jean-Baptiste, né le 15/01/1622
 
   </div>
 
</body></html>

Si vous avez idée de comment changer le texte "infos"...

Merci d'avance !!

**riccco** · 22/07/2006, 19h41

Re...

ça dépend dans quoi tu comptes les mettre tes infos:

dans un tableau javascript ,
dans un input caché ?

**troumad** · 22/07/2006, 23h30

1) rajoute des noms à tes options
2) passe un paramètre à ta fonction

Voici un exemple :

Code :

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

<select name="combien" onchange="affiche_tb(this.value)"><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option></select>

3) donne plus d'info

**Auteur** · 23/07/2006, 12h40

bonjour,

tu souhaites quelque chose dans ce genre là ?

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<html><head><title>Test</title>
 
<script type="text/javascript">
<!--
var tabInfos = new Array();
function initTab()
{
tabInfos[0] = "Moliere Poquelin Jean-Baptiste, né le 15/01/1622";
tabInfos[1] = "Racine......";
tabInfos[2] = "Corneille............";
tabInfos[3] = "Hugo.....";
}
 
function rafraichirInfos(idNom)
{
 document.getElementById("infos").innerHTML = tabInfos[parseInt(idNom)];
}
//-->
 
</script>
 
</head>
<body onload="initTab()">
 
<form name="formulaire1" action="">
 
   <select name="choix" size="4" onChange="rafraichirInfos(this.value)">
      <option value="0">Moliere</option>
      <option value="1">Racine</option>
      <option value="2">Corneille</option>
      <option value="3">Hugo</option>
   </select>
 
</form>
 
   <div id="infos">
   &nbsp;
   </div>
 
</body>
</html>

**gregolak** · 23/07/2006, 15h42

Envoyé par Auteur

bonjour,

tu souhaites quelque chose dans ce genre là ?

Oui, c'est exactement ça qu'il me fallait ! Merci BEAUCOUP !

J'y étais presque avec les indications de riccco et troumad
(merci aussi au passage !), mais je ne voyais pas bien où
stocker les infos non affichées (tabinfos dans ton exemple),
j'étais parti dans une grosse machinerie avec CSS... Là c'est
tout simple !

Merci encore !

lier une liste déroulante et un simple texte HTML

JavaScript

Discussions similaires

Partager

Partager