$(function() {
$('#Yes_smoke').hide();
$('#smoke').change(function() {
if ($('#smoke').val() == 'Yes') {
$('#Yes_smoke').show();
} else {
$('#Yes_smoke').hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ex_smoker">
<tr>
<td class="prop">Are you an ex-smoker?</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</tr>
</div>
<div class="ex_smoker" id="Yes_smoke">
<tr class="Yes_smoke">
<td class="prop" width="20%">When did you last smoke?</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_when" VALUE="">
</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_whenb" VALUE="">
</td>
</tr>
</div>Ceci est mon code jquery ainsi qu'une partie de mon formulaire html. J'essaie de faire apparaître 'Quand avez-vous fumé pour la dernière fois' lorsque l'utilisateur sélectionne 'Oui' dans la sélection ci-dessus, et d'être caché jusque-là. Mais cela ne fonctionne pas actuellement et je ne sais pas pourquoi, toute aide serait appréciée. Je vous remercie.
3 réponses
Comme l'a souligné Lelio, vous avez deux cases de sélection identiques faisant la même chose. La suppression de la duplication semble faire l'affaire - voir ce JSFiddle.
Assurez-vous également que vous chargez JQuery avant votre script personnalisé, c'est-à-dire assurez-vous que la ligne
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Ou similaire, référençant une bibliothèque locale par exemple, est au-dessus de votre script dans votre page HTML.
Il est également recommandé d'ajouter vos scripts juste avant la fin de votre élément <body>.
Vous devez écrire un code de fonction dans le chargement de la fenêtre - dans le but d'attribuer un événement de changement sur DOM générer
<script type="text/javascript">
$(window).load(function() {
$('#Yes_smoke').hide();
$('#smoke').change(function(){
if($('#smoke').val() == 'Yes') {
$('#Yes_smoke').show();
} else {
$('#Yes_smoke').hide();
}
});
});
</script>
Vous dupliquez les identifiants.
<div class="ex_smoker">
<tr>
<td class="prop">Are you an ex-smoker?</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</tr>
</div>
<div class="ex_smoker" id="Yes_smoke">
<tr class="Yes_smoke">
<td class="prop" width="20%">When did you last smoke?</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_when" VALUE="">
</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_whenb" VALUE="">
</td>
</tr>
</div>