Utfør belastning og endre sammen jQuery

stemmer
0

Jeg har en js fungere som viser ulike meldinger når et alternativ velger klikkes. Jeg bruker .onchangeå fyre av meldinger.

Det jeg prøver å oppnå så vel er å vise den riktige meldingen hvis du laster HTML og et alternativ allerede er valgt. Så noe jeg antar å kombinere endring og belastning.

Her er mitt 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(); }

});

Jeg har prøvd å bruke .onloadsammen med change, men kan ikke finne ut hvorfor det ikke fungerer

Publisert på 19/03/2020 klokken 21:52
kilden bruker
På andre språk...                            


1 svar

stemmer
1

I stedet for å utløse onload, må du utløse .change () ved nedtrekksmenyen. Dette utløser den samme funksjonen som om noen valgte / endret nedtrekksmenyen. Jeg har også optimalisert kode.

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

$('#cat').change();
Svarte 19/03/2020 kl. 22:02
kilden bruker

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