Essayer de faire apparaître une ligne sur la sélection déroulante via jquery

Question

$(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.

javascript jquery html

1

Adam Wyett 16 avril 2018 à 13:31

Answer 1

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>.

0

Harry 16 avril 2018 à 10:45

Answer 2

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>

0

Siva Rm K 16 avril 2018 à 10:43

Answer 3

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>

0

Pramod Patil 16 avril 2018 à 10:43

Essayer de faire apparaître une ligne sur la sélection déroulante via jquery

3 réponses

Questions connexes

De nouvelles questions

javascript