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

**CyrilD** · 30/03/2010, 15h12

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

Code :

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

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 '&nbsp;&nbsp; Position du local : &nbsp;&nbsp;';
echo '<input type="text" name="position_local" value="'.$position_loc.'">';

Invité · 30/03/2010, 18h32

salut,

commence par englober

Code :

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

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 :

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

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 :

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

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

**CyrilD** · 31/03/2010, 10h14

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 :

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

**CyrilD** · 31/03/2010, 10h24

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>

Invité · 31/03/2010, 13h06

re,

voici un code qui 'marche'

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