一起执行加载和更改jQuery

Question

我有一个js函数，当单击select中的选项时，该函数显示不同的消息。我正在使用.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>

The 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一起使用，但无法弄清为什么它不起作用

Answer 1

而不是触发加载，您需要触发下拉菜单的.change（）事件。这触发了与某人选择/更改下拉菜单相同的功能。我还优化了代码。

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

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