一起执行加载和更改jQuery

Question

我有一个 js 函数，它在单击 select 中的选项时显示不同的消息。我正在使用 .onchange 来触发消息。

如果您加载 HTML 并且某个选项已经 selected，我也想实现的是显示正确的消息。所以我想以某种方式结合更改和加载。

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

Answer 1

不触发onload，需要触发下拉框的.change()事件。这会触发与某人 selected/changed 下拉菜单相同的功能。我也优化了代码。

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

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

一起执行加载和更改jQuery

Execute load and change together jQuery

jquery

onload