Div caché lié à une liste déroulante
JBennn
Messages postés
107
Statut
Membre
-
Alain_42 Messages postés 5413 Statut Membre -
Alain_42 Messages postés 5413 Statut Membre -
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 :
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
- Copie caché - Guide
- Numéro caché - Guide
- Jeux google caché - Guide
1 réponse
avec none et bloc la place du div n'est pas "gardée"
avec hidden et visible la place est "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>