Раскройте div, используя jQuery

Question

Я пытаюсь показать этот div, когда пользователь выбирает Etudiant в selectbox

<div class="form-group">
  <label for="">Type du compte</label>
  <select id="type" required class="chosen form-control" name="type"  >
    <option required selected disabled value="fail">Choix type du compte </option>    
    <option required  value="professeur">Professeur </option>    
    <option required  value="etudiant">Etudiant </option>    
  </select>
</div>

<div id="phone" hidden class="form-group">
  <label for="">Téléphone</label>
  <input  required class="form-control"  name="phone" class="form-control">
</div>

Я уже пробовал это с использованием jQuery безуспешно

<script>
  $(document).ready(function () {
    $("#type").change(function () {
      switch($(this).val()) {      
        case 'etudiant':
          $("#phone").show();
          break;
        default:
          $("#phone").hide();
      } 
    });
  });
</script>

Answer 1

Вы можете выполнить sh такое поведение, добавив EventListener к элементу select и проверив, равно ли выбранное значение option etudiant и если display свойство имеет значение none примерно так:

let selectElement = document.getElementById('type')

const phoneDiv = document.querySelector('#phone');

selectElement.addEventListener('change', (e) => {
  if (e.target.value === 'etudiant' && phoneDiv.style.display === '') {
    phoneDiv.style.display = 'block'
  } else {
    phoneDiv.style.display = ''
  }
})

Вы можете проверить этот пример реального кода .