lier une liste déroulante et un simple texte HTML

Version imprimable

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:

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">  </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 !! 8-)

22/07/2006, 19h41
riccco

Re...

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

dans un tableau javascript ,
dans un input caché ?
22/07/2006, 23h30
troumad

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

Voici un exemple :

Code:

<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

bonjour,

tu souhaites quelque chose dans ce genre là ?

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
 
<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>

23/07/2006, 15h42
gregolak

Citation:

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 ! 8-)