[HTML] Donner la valeur d'une liste d'option à une zone de texte

Version imprimable

Bonjour tout le monde,

J'ai une liste d'option reprise comme ci-dessous :
Code:

1 2 3 4 5 <select name="select4" size="1" > <option selected> </option> <option value="valeur du choix 1">choix1</option> <option value ="valeur du choix 2">Choix2</option> </select>
se trouvant dans un tableau.

La collone à côté comporte une zone de texte :

Code:

<input name="textarea" type="text" value=""

J'aimerais que quand un visiteur clique sur une option de la liste d'option, que la valeur de la zone de texte affiche l'information de la liste d'option, information entre "".

Est-ce possible sans passer par Javascript ?

Merci d'avance pour votre aide si précieuse.

bgs

Salut,

Dsl à pars JS je ne vois pas :

1er : nomme correctement ta balise <select>
Code:

1 2 3 4 5 <select name="select4" size="1" > <option selected> </option> <= ?? <option value="valeur du choix 1">choix1</option> <option value ="valeur du choix 2">Choix2</option> </select>
Avec JS tu récupère la valeur selectionné comme ca :

Code:

s = document.getElementByName('select4');

et tu récupère la valeur comme ca :
Code:

1 2 3 4 val = s.selectedIndex.value; <input name="textarea" type="text" value="">
Pour mettre à jour ton <input>, tu le récupères de la même manière que ton <select> :

Code:

t = document.getElementByName('textarea');

et tu lui attribut une valeur comme ca :

Code:

t.value = val;

voila!
Maintenant moi je préfère utiliser la fonction getElementById car je crois que getElementByName ne fonctionne pas avec tous les nouveaux navigateurs!
Je n'avance rien car de toute facon je n'utilise pas getElementByName.

A+!

Salut Hug0_76,

Merci beaucoup pour ta réponse.

Code:

<option selected> </option> <= ??

Je met un espace blanc, cela permet d'avoir un blanc si le visiteur ne fait aucun choix.

Voici ce que j'ai fais :

La partie liste d'options :

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
<select name="select4" size="1" >
        <option selected> </option>
        <option value="Introduction botanique à la pharmacognosie et éléments de mycologie">BIOL-J-201</option>
        <option>BIOL-J-301</option>
 
        <option>BMOL-J-201</option>
        <option>BMOL-J-202</option>
        <option>CHIM-J-201</option>
        <option>INFO-J-201</option>
 
        <option>MEDI-J-201</option>
        <option>MEDI-J-301</option>
 
        <option>PHAR-J-201</option>
        <option>PHAR-J-202</option>
        <option>PHAR-J-301</option>
        <option>PHAR-J-302</option>
        <option>PHAR-J-303</option>
        <option>PHAR-J-304</option>
        <option>PHAR-J-305</option>
 
		<option>STAT-J-201</option>
        <option>TRAN-J-201</option>
        <option>TRAN-J-202</option>
        <option>TRAN-J-301</option>
        <option>TRAN-J-302</option>
 
 
 
      </select> </div>     <span style="vertical-align:top; width:76px; height:23px; border-style:solid; border-color:#000000; border-width:1px">
 
      </span>
	  <script language="javascript">
	  s = document.getElementByName('select4');
	  val = s.selectedIndex.value;
</script>

et ensuite la partie zone de texte :

Code:

1
2
3
4
5
	   <script language="javascript">
	  t = document.getElementByName('textarea');
t.value = val;
</script>
	  <input name="textarea" type="text" value="" size="50">

ça ne donne malheureusment rien.

Vois-tu où j'ai fais l'erreur ?

Merci encore pour ton aide.

bgs

Erreur JS

Oui ton erreur vient du fait que tu créer un script sous ta balise <select>

Il faut que tu mettes un champs : onChange="maj()"
maj() étant la fonction javascript qui va mettre à jour ton <input>
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 <html> <title>maj</title> <head> <script type="text/javascript" language="javascript"> function maj() { t = document.getElementById('textarea'); s = document.getElementById('select4'); t.value = s.options[s.selectedIndex].value; } </script> </head> <body> <select id="select4" onChange="maj()"> <option value="champ1">Champs1</option> <option value="champ2">Champs2</option> <option value="champ3">Champs3</option> </select> <input type="text" id="textarea" value="" size=5> </body> </html>
Si tu ne mets pas de champs value="...." la valeur sera celle comprise entre tezs balises <option></option>

29/08/2006, 16h17
beegees

Merci beaucoup Hug0_76,

Quand je choisis une option, j'obtiens une fenêtre avec la valeur de l'option.

Par contre, la zone de texte me donne la valeur "undefined".

Est-ce que cela te dis quelque chose ?

Merci encore pour ton aide, on avance à grand pas.

bgs
29/08/2006, 16h22
Hug0_76

est ce que tu as changé tes name par id dans tes champs????
En fait les fonctions que j'utilise (getElementById) fonctionnent mieux d'après moi!

Si tu reprends le code juste au dessus c'est censé marcher car je l'ai dabord fais sur une page web pour voir si je n'écrivais pas de conneries :mouarf:

Au fait tu obtiens une fenetre avec la valeur option mais parce que tu as un alert(), mais j'ai changé le code entre temps :p!
J'avais laissé le alert pour faire un test mais change, enfin recharge la page et reprend le code je l'ai édité!
;)
29/08/2006, 16h34
beegees

Je suis heureux de te dire que ça fonctionne, tu es un chef !

Un super grand merci à toi, c'est vraiment sympa d'avoir consacré du temps à faire cela.

Ce n'est qu'une première partie de mon boulot mais c'est déjà ça.

Encore un super grand merci.

A bientôt.

bgs
29/08/2006, 16h34
Hug0_76

de rien ;)!
Le forum est là pour ca!
A+