Cacher/Afficher des éléments en fonction d'un choix dans une liste déroulante

Version imprimable

Bonjour,

Alors mon problème ici est que je veux selon le choix fait dans la liste afficher ou non les 2 derniers echos
Pour être plus précis, le champ "local" de la table "appareil" correspond à un booléen oui/non et quand on sélectionne un appareil en fonction de son libellé apparaissant dans la liste déroulante, si c'est oui qui correspond à cet appareil, on laisse afficher l'écriture "position du local" ainsi que son champ de saisie et c'est non, on cache l'écriture et le champ de saisie.

Donc une fois de plus, je pense que le onchange fera l'affaire sur la liste mais je suis toujours mauvais syntaxiquement parlant :cry:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 echo '<select name="select_type_appareil">'; // On récupère tous les choix possibles $req_type_app = mysql_query("select num_type_appareil, lib_type_appareil, local from appareil order by num_type_appareil ASC;"); while ($res_type_app = mysql_fetch_array($req_type_app)) { echo '<option value="'.$res_type_app[0].'">'.$res_type_app[1].'</option>'; } echo '</select>'; echo '   Position du local :   '; echo '<input type="text" name="position_local" value="'.$position_loc.'">';

salut,

commence par englober

Code:

1
2
'&nbsp;&nbsp; Position du local : &nbsp;&nbsp;';
'<input type="text" name="position_local" value="'.$position_loc.'">';

par un paragraphe par exemple.
avec les guillemets et tout comme il faut...

Code:

1
2
3
4
<p id="pFacultatif">
'&nbsp;&nbsp; Position du local : &nbsp;&nbsp;';
'<input type="text" name="position_local" value="'.$position_loc.'">';
</p>

Ensuite, il faudra juste cacher p ou pas en fonction du choix du gars.
Coté js, tu fais un truc qui ressemble à ca :

Code:

1
2
3
4
5
6
7
8
9
10
var select = document.getElementsByTagName('select')[0];//pour chopper le select si c'est le seul dans la page. C'est mieux de mettre un id qu'un name, pour qu'on puisse utiliser getElementById tranquillou histoire qu'on soit pas que sous IE ... lol
select.onchange=function(){
 var p = document.getElementById('pFactultatif');
 if(this.value=='oui'){
  //on cache le paragraphe
  p.style.display = '';//valeur qq pour rafficher p
 }else{
  p.style.display = 'none';//valeur a none pour le cacher
 }
};

Aux erreurs de la syntaxe...

rép

Bonjour,
merci pour ta réponse mais j'ai encore quelques soucis.
D'une, ca ne marche pas, j'ai du me planter dans la syntaxe quelque part :'(
De deux, lors de l'adaptation de ta solution, je ne garde plus en mémoire dans ma liste déroulante le numéro de l'appareil pour garder à la plus la valeur 'oui' ou 'non' ce qui ne m'arrange pas du tout :(

Donc voici ton code que j'ai essayé d'adapter et qui ne marche pas :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <head> <script> var select = document.getElementsByTagName('select_type_appareil'); select.onchange = function() { var p = document.getElementById('test'); if (this.value=='oui') //on cache le paragraphe { p.style.display = '';//valeur qq pour rafficher p } else { p.style.display = 'none';//valeur a none pour le cacher } } ...

31/03/2010, 10h24
CyrilD

Désolé pour le double post, je n'arrivais meme pas à écrire les lignes ci-dessous dans le message précédent

EDIT : je n'arrive pas a poster la suite. J'ai le meme pb qu'avant, pour poster le bout de code ci dessus, j'ai copié/collé les lignes 1 par 1 et je n'ai pas pu copier la ligne du </script>

re,

voici un code qui 'marche'

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
 <body>
  <select>
   <option value="oui">Oui</option>
   <option value="non">Non</option>
  </select>
  <p id="toHide">
   J'aime la viande
  </p>
<script type="text/javascript">
var select= document.getElementsByTagName('select')[0];//important le [0], spour dire qu'on prend le premier select trouvé!
select.onchange = function(){
 var p = document.getElementById('toHide');
 if(this.value=='oui') p.style.display='';
 else p.style.display = 'none';
}
</script>
</body>
</html>

tu peux l'adapter...

31/03/2010, 13h20
CyrilD

Merci galérien mais j'ai trouvé entre temps une autre solution pas belle du tout mais qui marche au moins ;)

Le [0], j'avais compris son utilité et je l'avais enlevé parce que c'était une de mes listes déroulantes parmis la trentaine sur la page en faite :mouarf:

Sinon, je poste pas ce que j'ai fais parce que ca marchera pas mais je met le post en résolu