Условные поля с jQuery и семантическим интерфейсом

Question

У меня есть форма, созданная с помощью semantic-ui, и мне нужно сделать несколько полей условно отображаемыми в случае, если сделан определенный выбор.

Вот HTML-код:

        <div class="field">
          <label>Pay Mode</label>
          <div class="ui selection dropdown" id="paymode">
            <input type='hidden' name='pay_mode'>
            <i class="dropdown icon"></i>
            <div class="default text">Pay Mode</div>
            <div class="menu">
                <div class="item" data-value="free">Free</div>
                <div class="item" data-value="stand alone">Stand alone</div>
                <div class="item" data-value="central system">Central System</div>
            </div>
          </div>
        </div>
        <div class="conditional">
          <div class='three fields'>
            <div class='field'>
              <label>A1</label>
              <input
                type='text'
                name='a1'
                value=''
                required
              />
            </div>
            <div class='field'>
              <label>A2</label>
              <input
                type='text'
                name='a2'
                value=''
                required
              />
           ...

Так что, в принципе, это режим оплаты. Класс «условный» должен отображаться только в том случае, если в режиме оплаты выбран «Автономный».

Вот мой js-файл:

$('.conditional').hide();
$('#paymode').change(function () {
   var selected = $('#paymode item:selected').text();
   $('.conditional').toggle(selected == "Stand alone");
});

Этот успешный скрывает условный класс, но тот же класс не отображается, даже если в качестве опции выбран Автономный класс. Что не так с этим кодом? Большое спасибо!

Answer 1

Я нашел решение.

Слегка измените раскрывающееся поле "Режим оплаты", например, так:

            <div class="field">
              <label>Pay Mode</label>
              <select name="pay_mode" class="ui fluid dropdown" id="condition">
                  <option value="">Pay Mode</option>
                  <option value="free">Free</option>
                  <option value="stand alone">Stand alone</option>
                  <option value="central system">Central System</option>
                </select>
            </div>

И файл js вот так:

    $('.conditional').hide();

    $('#condition').change(function () {
      var selected = $('#condition option:selected').text();
      $('.conditional').toggle(selected == "Stand alone");
    });

itработает как шарм!