Cacher une liste déroulante suite au choix à OUI d'une autre

**illight** · 05/11/2015, 16h31

Bonjour,

En espérant poster au bon endroit, j'ai un problème dans une page PHP, où j'ai un javascript qui tourne dessus, mais qui ne fonctionne pas comme je voudrais. Le PHP je connais (enfin je me débrouille), mais le javascript j'ai un peu de mal.

je vous explique mon problème : j'ai un formulaire, avec une liste déroulante, qui, lorsqu'elle passe à OUI fait apparaître, à l'heure actuelle un champ (ici le champ date) :

Quand je la met à OUI, le champ date apparaît. Si c'est vide ou c'est à NON, ça n'affiche pas la date.

Dont voici le code PHP :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<td>
   <select name='GARANTIE' id='GARANTIE' onchange='sous_garantie_on_change();'>
      <option value=''></option>
      <option value='OUI'>Oui</option>
      <option value='NON'>Non</option>
   </select>
</td>
</tr>
<tr>
   <td>Date de fin de garantie constructeur:</td>
   <td><input type="text" name="FIN_GARANTIE" id="FIN_GARANTIE"/></td>
</tr>

Cette vérification, si je comprend bien mon script, est fait par du javascript (en effet, la fonction sous_garantie_on_changes() lance une fonction javascript qui s'appelle sousGarantieChanges), écrit comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function sousGarantieChanges()
{
	if($("#GARANTIE").val() == "OUI")
	{
		$("#FIN_GARANTIE").parent().parent().css("display", "table-row");
	}
	else
	{
		$("#FIN_GARANTIE").parent().parent().css("display", "none");
	}
}

Donc jusque là, tout va bien : ça fonctionne correctement. Vous allez me dire mais pourquoi j'écris

Ben en fait, dans mon premier écran, je voudrais rajouter une liste déroulante, dans la même optique, en la cachant si la liste n'est pas à OUI.

J'ai donc rajouté dans ma page PHP ceci :

Code html :

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

1
2
3
4
5
6
7
8
<tr>
   <td>Liste2:</td>
   <select name='Liste2' id='Liste2' >
      <option value=''></option>
      <option value='choix1'>Oui</option>
      <option value='choix2'>Non</option>
   </select>
</tr>

Après le choix de la liste "GARANTIE".

Dans mon javascript j'ai une modif comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function sousGarantieChanges()
{
	if($("#GARANTIE").val() == "OUI")
	{
		$("#FIN_GARANTIE").parent().parent().css("display", "table-row");
		$("#Liste2").parent().parent().css("display", "table-row");
	}
	else
	{
		$("#FIN_GARANTIE").parent().parent().css("display", "none");
		$("#Liste2").parent().parent().css("display", "none");
	}
}

Pensant que la liste allait être cachée. Malheureusement ce n'est pas le cas : Même lorsque je met sur NON ma liste GARANTIE, LISTE2 apparaît quand même

n'est-ce pas comme ça qu'il faut faire la modif dans le javascript ?

petite question subsidiaire : pour ma culture personnelle, à quoi sert le "#" dans le javascript devant le nom "#FIN_GARANTIE" par exemple ?

En vous remerciant par avance de vos réponses, et en espérant avoir été assez clair.

**Jacques Beauregard** · 05/11/2015, 16h41

Bonjour,

première remarque : ta fonction JS sousGarantieChanges() n'est jamais appelée dans la liste2 (pas de onchange sur le <select> ?)
deuxième remarque : en jQuery, le # permet de sélectionner un élément HTML par son id. Donc :

Code :

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

$("#FIN_GARANTIE")

ce code sélectionne l'élément HTML d'id : FIN_GARANTIE, qui est un <input>

**NoSmoking** · 05/11/2015, 16h48

Bonjour,
jette également un oeil sur jQuery.closest() .

**illight** · 05/11/2015, 16h51

Bonjour,

Je te remercie pour ta réponse, mai j'ai pas l'impression que ça réponde à mon besoin.

En effet, je voudrais que la Liste2 soit cachée sur le fait que la liste GARANTIE soit à OUI ou NON.

je viens de remarquer que j'avais oublié de mettre les images

Donc je vais la mettre ici : Voici ce que j'ai actuellement :

Nom : liste1.png
Affichages : 392
Taille : 1,9 Ko

Je voudrais avoir ça :

Nom : liste_oui.png
Affichages : 402
Taille : 1,4 Ko

Si la liste GARANTIE est à OUI.

Si c'est non ou vide, il faudrait avoir ça :

Nom : liste_non_vide.png
Affichages : 404
Taille : 824 octets

En Gros, quand c'est vide ou non, le champ date et la liste 2 n'apparait pas.

Est-ce plus clair avec les images que j'ai oublié de mettre ?

je te remercie en tout cas de te pencher sur mon problème

**Jacques Beauregard** · 05/11/2015, 17h03

Au temps pour moi j'avais rien compris ^^.
Peut-être sur ce bout de code :

Code :

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

1
2
3
4
5
6
7
8
<tr>
   <td>Liste2:</td>
   <select name='Liste2' id='Liste2' >
      <option value=''></option>
      <option value='choix1'>Oui</option>
      <option value='choix2'>Non</option>
   </select>
</tr>

d'après le HTML, le premier parent de #Liste2 est un <tr>
Donc :

Code :

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

$("#Liste2").parent().parent().css("display", "table-row");

je supprimerais un .parent()

où alors placer le <select> dans un <td>.

**illight** · 05/11/2015, 17h18

Re,

Malheureusement, enlever un parent() (et même en rajouter un

) ne change rien

Par contre, je te remercie car je crois que tu m'as fait comprendre l'utilité du parent (car je ne savais pas à quoi ça servait).

Par contre, par rapport à ce que tu dis, mon select EST dans un td, c'est pour ça, du coup, qu'il y a 2 parent.

En fait, j'ai un TR, et 2 TD : le TR me permet d'avoir la ligne souhaitée (en me basant sur mes souvenirs HTML de mon IUT

), et les TD sont :
- le titre de ma liste (ou ma textbox) écrit en dur (ici c'est Liste2)
- mon "objet" (ici ma ListBox).

En fait, mon tableau comporte 13 lignes et 2 colonnes en quelque sorte. Mais je n'ai écrit que la fin, car c'est la fin qu m'intéresse, et que je n'arrive pas à faire disparaitre

Et si j'enlève le TD d'où est ma liste, la colonne disparaît complètement, et heuu ça non

donc forcément, la ListBox doit être dans un TD.

NoSmoking,

Merci pour ton intervention, j'ai un peu regarder la fonction closest, mais je comprend rien comment ça marche

Comme dit plus haut, mes connaissances en java sont assez limitées. Le code que j'ai mis ici et un code récupéré d'un ancien stagiaire, et c'est moi qui suit en charge de la maintenance, et là on me demande une évolution, en rajoutant des champs..

**illight** · 05/11/2015, 17h23

yes, ça marche !

Heuu en fait

j'ai un peu honte. J'ai vidé mon cache, et après actualisation, le champ était bien caché. Je pensais pas que le cache d'Internet gardait une info de ce style. Très étrange !

En tout cas, je vous remercie car grâce à vous, j'ai appris des choses

**Jacques Beauregard** · 05/11/2015, 17h29

En fait, j'ai un TR, et 2 TD : le TR me permet d'avoir la ligne souhaitée (en me basant sur mes souvenirs HTML de mon IUT ), et les TD sont :
- le titre de ma liste (ou ma textbox) écrit en dur (ici c'est Liste2)
- mon "objet" (ici ma ListBox).

Peut-on avoir le code HTML?

car d'après ce code :

Code :

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

1
2
3
4
5
6
7
8
<tr>
   <td>Liste2:</td>
   <select name='Liste2' id='Liste2' >
      <option value=''></option>
      <option value='choix1'>Oui</option>
      <option value='choix2'>Non</option>
   </select>
</tr>

le <select> n'est pas dans un <td> mais directement dans un <tr>