javascript - Växla klass från rullgardinsmeny

Jag försöker växla en klass genom att välja ett alternativ i rullgardinsmenyn, jag har försökt använda en alert() för att kontrollera om det fungerar men jag verkar inte få det att fungera.

HTML:

<html>
<body>
    <select id="dropdown">
        <option value="1">Steinkjer</option>
        <option value="2">Verdal</option>
    </select>
</body>
</html>

Javascript:

$('#dropdown option:selected').click(function(){
    var getText = $('#dropdown option').text();
    alert($('.overlay-'+getText));
});

Vänligen hjälp mig att lösa detta problem.

Svar #1

$ ('#dropdown option:selected') är inte ett live-objekt. Din kod binder klickhanteraren till det valda alternativet vid sidladdning. Du bör antingen använda händelsedelegering eller bättre lyssna på change-händelsen för select-elementet.

$('#dropdown').on('change', function() {
    // Get text content of the selected option
    var getText = $('option:selected', this).text();
    // Get current value of the select element
    // var getValue = this.value;
    console.log(getText);
    console.log($('.overlay-'+getText));
});

Svar #2

Du behöver:

• Kontrollera att document.ready har körts
• Tilldela ändringshändelsen

För att binda vissa händelser till DOM-element krävs ett document.ready, för att säkerställa att DOM-elementet är skapat vid tidpunkten då du associerar händelsen.

• En sida kan inte manipuleras säkert förrän dokumentet är "klart." : https://learn.jquery.com/using-jquery-core/document-ready/

Kolla på det här utdraget:

$(document).ready(function() {

  $('#dropdown').change(function() {
    var getText = $('#dropdown option:selected').html();
    $("#test").removeClass();
    $("#test").toggleClass("overlay-" + getText);
  });



});

.overlay-Steinkjer {
  background-color: red;
}
.overlay-Verdal {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <select id="dropdown">
    <option value="1">Steinkjer</option>
    <option value="2">Verdal</option>
  </select>

  <p id="test">test paragraph</p>
</body>

</html>