Скрыть и показать поля в html, используя jquery

Question

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

<script>
   $(document).ready(function() {
       toggleFields();
       $("#selection").change(function() {
           toggleFields();
       });
   });
   function toggleFields() {
       if ($("#selection").val() == 156)
           $("#Distance").show();
       else
           $("#Distance").hide();
       if ($("#selection").val() == 156)
           $("#closest").hide();
       else
           $("#closest").show();
   }
</script>
<tr>
   <td style="width: 50%">
      <label for = "section"><b> Are you using Optimap? *</b></label><br><br>
      <select id="selection" name="selection" style="width: 320px; height: 35px; border-radius: 8px" required>
         <option value="" disabled selected > Please Select... </option>
         <option value="156"> Yes</option>
         <option value="160"> No </option>
      </select>
      <br><br>
   </td>
   <td style="width: 50%" id = "closest" style="display: none;">
      <label for="closest"><b>The Distance between the center of two closest PCB's in mm *</b></label><br><br>
      <input type = "number" step="any" name = "closest" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
   </td>
   <td style="width: 50%">
      <div  id = "Distance" style="display: none;">
      <label for="stance"><b>The Distance between the center of two closest Optimaps in mm *</b></label><br><br>
      <input type = "number" step="any" name = "Distance" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
   </td>
</tr>

Answer 1

Посмотрев на ваш код, я думаю, что вы как-то соединили атрибуты <div> со <td> второй строки.

Я исправил ваш код и думаю, что вы ожидаете такого поведения:

<script>
   $(document).ready(function() {
       toggleFields();
       $("#selection").change(function() {
           toggleFields();
       });
   });
   function toggleFields() {
       if ($("#selection").val() == 156)
           $("#Distance").show();
       else
           $("#Distance").hide();
       if ($("#selection").val() == 156)
           $("#closest").hide();
       else
           $("#closest").show();
   }
</script>
<tr>
   <td style="width: 50%">
      <label for = "section"><b> Are you using Optimap? *</b></label><br><br>
      <select id="selection" name="selection" style="width: 320px; height: 35px; border-radius: 8px" required>
         <option value="" disabled selected > Please Select... </option>
         <option value="156"> Yes</option>
         <option value="160"> No </option>
      </select>
      <br><br>
   </td>
   <td style="width: 50%">
      <div id = "closest" style="display: none;">
         <label for="closest"><b>The Distance between the center of two closest PCB's in mm *</b></label><br><br>
         <input type = "number" step="any" name = "closest" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
      </div>
   </td>
   <td style="width: 50%">
      <div  id = "Distance" style="display: none;">
      <label for="stance"><b>The Distance between the center of two closest Optimaps in mm *</b></label><br><br>
      <input type = "number" step="any" name = "Distance" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
   </td>
</tr>

Answer 2

есть ошибка в html как этот

 <td style="width: 50%" id = "closest" style="display: none;">

Вы не можете установить два встроенных стиля времени

Вы можете попробовать этот вариант, который, я думаю, поможет вам

$(document).ready(function() { 
    // if always default value of selection is "Please Select..." no point to call toggleFields(); on document ready
    
    // toggleFields();
    
  $("#selection").change(function() {
    toggleFields();
  });
});
function toggleFields() {
  if($("#selection").val() == 156){
    $("#closest").hide();
    $("#Distance").show();    
  }else{
    $("#Distance").hide();
    $("#closest").show();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr> 
                    <td style="width: 50%">
                        <label for = "section"><b> Are you using Optimap? *</b></label><br><br>
                        <select id="selection" name="selection" style="width: 320px; height: 35px; border-radius: 8px" required>
                            <option value="" disabled selected > Please Select... </option>
                            <option value="156"> Yes</option>
                            <option value="160"> No </option>  
                        </select><br><br>
                    </td>   
                    <td style="width: 50%; display: none" id ="closest">
                        <label for="closest"><b>The Distance between the center of two closest PCB's in mm *</b></label><br><br>
                        <input type = "number" step="any" name = "closest" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
                    </td>
                    <td style="width: 50%">
                        <div  id = "Distance" style="display: none;">
                        <label for="stance"><b>The Distance between the center of two closest Optimaps in mm *</b></label><br><br>
                        <input type = "number" step="any" name = "Distance" style="width: 320px; height: 25px; border-radius: 8px" required /><br><br>
                    </td>
                </tr>
</table>