Div caché lié à une liste déroulante

Fermé

JBennn Messages postés 92 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 13 juin 2013 - 16 déc. 2012 à 14:31
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 16 déc. 2012 à 15:25

Bonjour,

Je souhaite afficher une div lorsque un choix dans ma liste deroulante est en "selected" mais je ne vois pas comment faire :S

auriez-vous une idée ? svp la Div s'affiche déjà lorsque je selectionne le choix 0 dans la liste.

Voici mon code :

<select onchange="etape();" name="changeStep" id="changeStep">
					<?php 
					$listeSteps = mysql_query("SELECT * FROM pass_listeEtape 
											WHERE numEtape NOT IN(
												SELECT numEtape FROM pass_etape WHERE numPass = '{$thePass['idPass']}'
											)
												ORDER BY idListeEtape");
					
					while($step = mysql_fetch_array($listeSteps)){
					print_r($step);
						?>
						<option name="choix" value="<?php echo $step['numEtape'];?>">Étape <?php echo $step['numEtape'];?> - <?php echo $step['libelle'];?></option>
						<?php
					}
					?>
				</select>
				<div id="hidden">
					<label>Date de retour du BDL <input type="date" name="dateRetourBl" value="<?php echo $step['numEtape'];?>" /></label>
				</div>
				<input type="submit" value="Ajouter"/>
			</form>
			
			<script type="text/javascript">
				document.getElementById('hidden').style.visibility = "hidden";
				
				function etape() {
					if(document.formEtape.changeStep.value == 0){
				
						document.getElementById("hidden").style.visibility = "visible"
					}
					else
					{
						document.getElementById("hidden").style.visibility = "hidden"
					}
				};
			</script>

A voir également:

Div caché lié à une liste déroulante
Liste déroulante excel - Guide
Liste déroulante en cascade - Guide
Appel caché - Guide
Google sheet liste déroulante - Accueil - Guide bureautique
Copie caché - Guide

1 réponse

Réponse 1 / 1

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
16 déc. 2012 à 15:25

avec none et bloc la place du div n'est pas "gardée"
avec hidden et visible la place est "gardée"

<head>
<script type="text/javascript">
	function etape() {
		var selection_liste = document.getElementById('changeStep')
		if(selection_liste.value != -1){				
			document.getElementById('div_hidden').style.display = 'block';
			//on affiche le numéro d'étape dans l'input
			document.getElementById('dateRetourBl').value = selection_liste.value;
		}else{
			document.getElementById('div_hidden').style..display = 'none';
		}
	};
</script>

</head>
<body>
<form name="form1" method="post" action="...." >
	<select  name="changeStep" id="changeStep" onchange="etape();">
		<option value="-1"> -- choisissez une étape --</option> <!-- cette ligne obligatoire si tu veux un changement à chaque fois -->
	<?php 
		$listeSteps = mysql_query("SELECT * FROM pass_listeEtape 
								WHERE numEtape NOT IN(
								SELECT numEtape FROM pass_etape WHERE numPass = '{$thePass['idPass']}')
								ORDER BY idListeEtape");
						
		while($step = mysql_fetch_array($listeSteps)){
			//print_r($step); 
			/*
			pour avoir un affichage plus lisible de l'array:
			echo '<pre>';
			print_r($step);
			echo '</pre>';
						
			*/
			//pas de name dans <option
	?>
			<option value="<?php echo $step['numEtape'];?>">Étape <?php echo $step['numEtape'];?> - <?php echo $step['libelle'];?></option>
	<?php
		}
	?>
	</select>

	<div id="div_hidden" style="display:none;">
		<!-- on cache d'office le div -->
		<label>Date de retour du BDL <input type="date" name="dateRetourBl" id="dateRetourBl" value="" /></label>
		<!-- 
		tel que tu avait mis value= c'était la dernière de la liste des étapes, il faut charger cette valeur par JS par la fct etape() 
		d'ailleurs je ne comprend pas pourquoi tu mets ici le numéro d'étape alors que tu attend une date ??
		et attention type="date" c'est du html5 ne fonctionne pas avec tous les navigateurs, mets plutot text et controle ensuite
		-->
	</div>
	<input type="submit" name="ajouter" value="Ajouter"/>
</form>

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Comment trouver les fichier cachés ?

Effacer le contenue d'une cellule avec liste déroulante

supprimer une liste déroulante