On change method JQuery bug – JQuery

I’m trying to figure out when a user selects an element of the select and what element it is through jquery like so:

$('#firstSelect').on('change', function() {
        console.log("selected");
        alert( $(this).find(":selected").val() );
    });

I’ve also included the library at the top of the document:

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

But the method doesn’t work, when I select there is no log. This is the URL: https://www.goatcode.it/me/codeCeptStudio/dah/

Could you tell me why this happens?

>Solution :

Your select element has only one option which is already selected, so there is no actual "change" happening when you select that option again.

$('#firstSelect').on('change', function() {
  console.log("selected");
  alert($(this).find(":selected").val());
});

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

<select id="firstSelect">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>