Выполнить загрузку и изменить вместе jQuery - PullRequest
Новая
       7

Выполнить загрузку и изменить вместе jQuery

0 голосов
/ 19 марта 2020

У меня есть функция js, которая показывает разные сообщения, когда выбирается опция из выбора. Я использую .onchange для запуска сообщений.

Я также пытаюсь добиться правильного отображения сообщения, если вы загрузите HTML и опция уже выбрана. Так что я как-то предполагаю объединить изменение и загрузку.

Вот мой HTML

<div class="row">

                    <div class="col-md-4">
                    <div class="form-group"><label for="cat">Category</label>
                            <select name="cat" id="cat" class="form-control" size="5">
                                <option value="General">General</option>
                                <option value="Rooms">Rooms</option>
                                <option value="Restaurant">Restaurant</option>
                                <option value="Spa">Spa</option>
                                <option value="Massages" selected>Massages</option>

                            </select>
                        </div>
                </div> 
                <div class="col-md-8">
                    <div class="form-group"><label for="cat">Category explanation</label>
                            <div class="alert alert-secondary show_general" style="display:none;"><strong>General: </strong>The general category </div>
                            <div class="alert alert-secondary show_rooms" style="display:none;"><strong>Rooms: </strong>The rooms category </div>
                            <div class="alert alert-secondary show_restaurant" style="display:none;"><strong>Restaurant: </strong>The </div>
                            <div class="alert alert-secondary show_spa" style="display:none;"><strong>Spa: </strong>The Spa category </div>
                            <div class="alert alert-secondary show_massages" style="display:none;"><strong>Massages: </strong>The massages category carousel </div>
                        </div>
                </div>
                </div>

JS

$('#cat').on('change load',function load_msg() {

  if ($(this).val() == 'General') { $('.show_general').show(); } else { $('.show_general').hide(); }
  if ($(this).val() == 'Rooms') { $('.show_rooms').show(); } else { $('.show_rooms').hide(); }
  if ($(this).val() == 'Spa') { $('.show_spa').show(); } else { $('.show_spa').hide(); }
  if ($(this).val() == 'Restaurant') { $('.show_restaurant').show(); } else { $('.show_restaurant').hide(); }
  if ($(this).val() == 'Massages') { $('.show_massages').show(); } else { $('.show_massages').hide(); }

});

Я пытался использовать .onload вместе с change, но не могу понять, почему он не работает

1 Ответ

1 голос
/ 20 марта 2020

Вместо того, чтобы вызывать нагрузку, вам нужно вызвать событие .change () раскрывающегося списка. Это вызывает ту же функцию, как если бы кто-то выбрал / изменил выпадающий список. Я также оптимизировал код. 

$('#cat').on('change',function load_msg() {
   $('.alert-secondary').hide();
   $('.show_'+ $(this).val().toLowerCase()).show();
});

$('#cat').change();
...