если значение выбрано из выпадающего списка, покажите еще один div, используя jquery

Question

У меня есть массив, который создает выпадающий список, что я хотел бы сделать, если выбрано «Другое», показать другой элемент в домене, который скрыт, пока не выбрано «Другое».

Jquery:

specialtyArray = ['One', 'Two','Other']

HTML:

 <ul class="form-dropdown-ul specialty-ul">
        <li class="specialty-list-item dropdown-list-item" id="specialty-list-item-0" tabindex="0"><label
                class="specialty-radio-label dropdown-label">One</label></li>
        <li class="specialty-list-item dropdown-list-item" id="specialty-list-item-1" tabindex="0"><label
                class="specialty-radio-label dropdown-label">Two</label></li>
        <li class="specialty-list-item dropdown-list-item" id="specialty-list-item-2" tabindex="0"><label
                class="specialty-radio-label dropdown-label">Other</label></li>
    </ul>


<div class="register_input-container--other">
      <input id="other" class="form-input form-input--other" name="other" type="text"
             placeholder="Please specify*">
    </div>

CSS:

 .register_input-container--other {
      display: none;
  }

Answer 1

Есть два способа сделать это, один только с CSS, другой с Javascript.

Путь Css
Если вы поставите элемент внутри тега <label> выглядит так:

<li class="specialty-list-item dropdown-list-item" id="specialty-list-item-2" tabindex="0">
  <label class="specialty-radio-label dropdown-label">
    Other
    <div class="register_input-container--other">
      <input id="other" class="form-input form-input--other" name="other" 
      type="text" placeholder="Please specify*">
    </div>
  </label>
</li>

Затем вы можете использовать css: hover для отображения скрытого контейнера, например

.register_input-container--other {
      display: none;
  }

  dropdown-label: hover > .register_input-container--other {
      display: block;
  }

The JS way
Чтобы сделать это с Javascript (Jquery), вы можете сохранить ваш HTML в точности таким, как он есть, и сделать следующее

$('#specialty-list-item-2').click(function(){
  $('.register_input-container--other').toggleClass('show');
});

Для этого вы потребуется добавить следующий класс, далее в коде css (для иерархии).

.show {
  display: block
}