基於下拉選擇的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

可能出了錯是

1. 唯一的東西你不加載jQuery庫
2. 您嘗試的元素出現在之前使用.change事件處理程序代碼 - $(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>