Führen Sie Last und ändern zusammen jQuery

stimmen
0

Ich habe eine Funktion , die js zeigt verschiedene Meldungen , wenn eine Option aus ausgewählten geklickt wird. Ich verwende .onchangedie Nachrichten zu feuern.

Was ich versuche, auch zu erreichen, ist die richtige Botschaft zu zeigen, wenn Sie den HTML-Code laden und eine Option ist bereits ausgewählt. Also irgendwie denke ich ändern und Last zu kombinieren.

Hier ist mein 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>

die 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(); }

});

Ich habe versucht , zu verwenden , .onloadzusammen mit change, kann aber nicht herausfinden , warum es nicht funktioniert

Veröffentlicht am 19/03/2020 um 21:52
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
1

Statt Auslösung onload, müssen Sie das .change () Ereignis der Drop-Down-auszulösen. Dies löst die gleiche Funktion wie wenn jemand ausgewählt / geändert, um die Dropdown-Liste. Ich habe auch den Code optimiert.

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

$('#cat').change();
Beantwortet am 19/03/2020 um 22:02
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more