Как отображать поля ввода на основе выбранных параметров?

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я пытаюсь показать поля ввода на основе выбранного значения, но это не работает. Кто-нибудь может сказать, что я делаю не так?

Вот мой код

 $('#milkoptions').on('change', function(){
   if($(this).val()==="milkfatrate") {
       $("#milkfatrateoptions").show()
   }
    else{
        $("#milkfatrateoptions").hide();
    }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <select class="form-control" id="milkoptions">
        <option value="default-value">Select your option</option>
        <option value="milkfatrate">Milk by Fat Rate</option>
   </select>
</div> 
<div id="milkfatrateoptions" style="display: none;">
    <div class="form-group">
        <input type="text" id="entry-date" class="form-control" name="milk-quantity" placeholder="Milk 
        Quantity">
     </div>
     <div class="form-group">
        <input type="text" id="entry-date" class="form-control" name="milk-fat" placeholder="Milk Fat">
      </div>
</div> 

Комментарии:

1. Работает нормально — jsfiddle.net/0Lk1qbvt Вы убедились, что ваш JS-код выполняется после того, как поле выбора уже существует?

2. не могли бы вы добавить описание своей ошибки?

3. Понял это! Я выполнял код скрипта перед файлом jquery