Div caché lié à une liste déroulante
JBennn
Messages postés
92
Date d'inscription
Statut
Membre
Dernière intervention
-
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
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
- Liste déroulante google sheet - Accueil - Guide bureautique
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>