renseigner un champs texte d'apres un select

Version imprimable

bjr jai un probleme dans un code javascript voila la question:Ecrivez un script javascript comprenant une liste déroulante et un champs de texte. La liste
déroulante sera composée de nom de pays. Quand on sélectionnera un pays de la liste, la capitale s’affichera dans le champs de texte.et voila le code que j'ai mi mais ça donne rien et je comprend pa pourquoi .svp aidez moi et merci d'avance.
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 <html> <head> <title>Test</title> <script language="javascript" type="text/javascript">  </script> </head> <body> <form name="form1"> <select name="list" onchange="capitale(form1)"> <option value="1">Maroc</option> <option value="2">France</option> <option value="3">Italie</option> <option value="4">Espagne</option> </select> <br> <input type="text" name="txtCapitale"> </form> </body> </html>

Le switch est tout a fait indiqué pour ces cas de figure

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 language="javascript" type="text/javascript">
<!--
function capitale(sel){
var capitale=""
switch (sel) {
 case "1" : capitale= "Rabat"
            break;
 case "2" : capitale= "Paris"
            break;
 case "3" : capitale= "Rome"
            break;
 case "4" : capitale= "Madrid"
            break;
 default:   capital="";}
 document.getElementsByName("txtCapitale")[0].value=capitale;}
 
 
 
 
//-->
</script>
</head>
<body>
 <form name="form1">
  <select name="list" onchange="capitale(this.value)">
  <option value="-1">selectionnez le pays</option>
  <option value="1">Maroc</option>
  <option value="2">France</option>
  <option value="3">Italie</option>
  <option value="4">Espagne</option>
  </select>
  <br>
  <input type="text" name="txtCapitale">
 
 </form>
 
 </body>
 
</html>

05/01/2010, 18h43
kernelfailure
A ce stade, un tableau (associatif ou non) serait aussi bien :
Code:

1 2 3 4 5 function capitale(sel) { if (sel < 0) return; var caps = ['',"Rabat","Paris","Rome","Madrid"]; document.getElementsByName("txtCapitale")[0].value=caps[parseInt(sel)] }
Pour les values :
Pourquoi ne pas avoir commencé à 'zéro' ?
Pourquoi ne pas mettre directement le nom des capitales en value des options ?

Mouais... il y a plus simple selon moi :

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
<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">
<!--
function capitale(valeur){
document.getElementById('resultat').value = valeur == '0' ? '' : valeur;
}
//-->
</script>
</head>
<body>
 <form name="form1">
  <select name="list" onchange="capitale(this.value)">
  <option value="0">Voir la capitale</option>
  <option value="Rabat">Maroc</option>
  <option value="Paris">France</option>
  <option value="Rome">Italie</option>
  <option value="Madrid">Espagne</option>
  </select>
  <br>
  <input type="text" name="txtCapitale" id="resultat" />
 
 </form>
 
 </body>
 
</html>

Bah oui.
Et mettre le code direct dans le onchange tant qu'à faire :mouarf:
Code:

1 2 3 4 <select name="list" onchange="document.getElementById('resultat').value = this.value"> <option value="">Voir la capitale</option> <option value="Rabat">Maroc</option> etc...

06/01/2010, 09h17
SpaceFrog

je préfère toute fois rester sur le switch principalement pour deux raisons:
* on peut avoir besoin du value pour autre chose et donc ça le monopolise avec le nom de la capitale
* je trouve et ce n'est qu'un avis personnel plus facile de mettre à jour un switch qu'un array dans la version array

sinon niveau optimisation il est clair que ce n'est pas la meilleure solution. Je suis dans l'optique maintenance.
07/01/2010, 09h40
asmar

merci a vous tous .Mais je comprend pas bcp de choses parce ke moi je suis encore debutante en javascript .
Pour Mr SpaceFrog votre solution marche tres bien mais je comprend pas pourquoi vs n'avez pas utilisé le if comme je l'ai fait moi ,meme avec if ça peut donné un resultat nn??pour le switch je connaisssai pas mais maintenenat grace a vous je connais et jai fait des recherches sur net et je lai bien compris ,juste ce code

Code:

document.getElementsByName("txtCapitale")[0].value=capitale;}

,je lai pas compri ,est ce qu'on peut pas mettre a sa place

Code:

form1.txtCapitale.value=capitale

.
Pour Mr kernelfailure moi je sais pas trop repondre a vos questions mais bon votre solution je l'ai pas compri ,est ce que vs pouvez m'eclairez un peu .

Pour Mr Bovino votre solution marche mais je compren pa cette ligne:document.getElementById('resultat').value = valeur == '0' ? '' : valeur;
et je comprend pas pourkoi vous donnez a la fonction capitale le parametre this.value???
07/01/2010, 09h45
SpaceFrog

concernant ma syntaxe et l'utilisation du switch au lieu du if ...

Oui tu peux utiliser le if ... c'est juste plus lourd ...

pour la syntyaxe, j'utilise une syntaxe sûre qui ne posera pas de problème selon le navigateur.
Tu peux utiliser ta syntaxe raccourcie qui fonctionne bien sous IE masi peut poser des soucis de conflit de variable dasn cerains cas et n epasse pas sur certains navigateurs ...

Pourquoi ne pas avoir commencé à 'zéro' ?
Tu commences tes values d'option à "1", tu aurais pu tout simplement commencer par "0".

Pourquoi ne pas mettre directement le nom des capitales en value des options ?
Comme Bovino l'a proposé, on peut tout aussi bien mettre le nom des capitales en value.

Solution #1
Je transforme tes chiffres (sel) en indice de tableau (parseInt(sel)).
Les noms des capitales ont été regroupé dans un tableau (Array) auquel j'accède en utilisant l'indice.

Solution #2
Ici les values sont directement les noms des capitales. Quand une modification de la sélection survient, on va affecté "resultat" immédiatement avec le choix de l'utilisateur.

Ici, deux manières d'accès aux objets du document :
par DOM (document.getElement... si un 's' à element, c'est une liste {NodeList}),
ou par les Objets Javascript (document.form1... équivalent à document.forms['form1']...).

Le "switch case default" sert à clarifier les structures de type "if else if else". Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var i = 2; switch(true) { case (i==0): alert('0'); break; case (i==1): alert('1'); break; default: alert("i est inconnu : " + i) } var i = 1; var j = 2; switch(i && j) { case (0 && 1): alert('0'); break; case (1 && 2): alert('1'); break; default: alert("i et j sont inconnu : " + i + ' ' + j) }