ドロップダウン選択に基づくHTML動的入力ボックス

Question

前回のドロップダウン選択の選択に基づいて入力ボックスを自動的に表示したい場合は、（うまくいけば）簡単な質問があります。

かなり新しいので、どんな助けでも大歓迎です！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<legend><b>Did Cardio Session?</b></legend> 
 
     <p> 
 
      <select name = "cardio" id = "cardio"> 
 
      <option value = "No" selected>No</option> 
 
      <option value = "Yes">Yes</option> 
 
      </select> 
 

 
      <div id = "cardioyes" style = "display:none;"> 
 
      <label for="How Long?">How Long?</label> 
 
      <input type = "text" name = "duration" /> 
 
      </div> 
 
     </p> 
 

 
     <script> 
 
     $('#cardio').change(function(){ 
 
     selection = $(this).val(); 
 
     switch(selection) 
 
     { 
 
      //show the <div> or not 
 
      case 'Yes': 
 
       $('#cardioyes').show(); 
 
       break; 
 
       default: 
 
       $('#cardioyes').hide(); 
 
       break; 
 
     } 
 
     }); 
 
     </script>

Answer 1

間違っている可能性が唯一のものは、あなたが要素の中に表示される前に.changeイベントハンドラを使用しようとjQueryライブラリ

をロードしていない

1. ですコード - $(document).readyはそれを処理します。これら以外の

、あなたのコードを見ることができるように機能します。

$(document).ready(function() { 
 
    $('#cardio').change(function() { 
 
    selection = $(this).val(); 
 
    switch (selection) { 
 
     case 'Yes': 
 
     $('#cardioyes').show(); 
 
     break; 
 

 
     default: 
 
     $('#cardioyes').hide(); 
 
     break; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<legend><b>Did Cardio Session?</b></legend> 
 
<p> 
 
    <select name="cardio" id="cardio"> 
 
    <option value = "No" selected>No</option> 
 
    <option value = "Yes">Yes</option> 
 
    </select> 
 

 
    <div id="cardioyes" style="display:none;"> 
 
    <label for="How Long?">How Long?</label> 
 
    <input type="text" name="duration" /> 
 
    </div> 
 
</p>