Get the value of a select element when it changes in jQuery

The Problem

Using jQuery, how can I retrieve the value of a <select> element when it changes?

The Solution

We can do this by binding a callback function to the relevant jQuery selector’s change event:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<select id="cities">
  <option value="paris">Paris</option>
  <option value="beijing">Beijing</option>
  <option value="cairo">Cairo</option>
</select>

<script>
  $('#cities').on('change', function () {
    console.log(`Cities selector changed to ${this.value}.`);
  });
</script>

Note that we’ve used the <select> element’s ID rather than $('select') to avoid applying this callback to the change event of every <select> element on our page. If this is the desired functionality, we can change $('#cities') to $('select').

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<select id="cities">
  <option value="paris">Paris</option>
  <option value="beijing">Beijing</option>
  <option value="cairo">Cairo</option>
</select>

<select id="countries">
  <option value="france">Paris</option>
  <option value="china">China</option>
  <option value="egypt">Egypt</option>
</select>

<script>
  $('select').on('change', function () {
    console.log(`A selector was changed to ${this.value}.`);
  });
</script>

We could achieve the same result as the first code snippet without using jQuery by changing the code inside the <script> tags and substituting document.getElementById for the jQuery $ selector and using .addEventListener instead of .on:

<select id="cities">
  <option value="paris">Paris</option>
  <option value="beijing">Beijing</option>
  <option value="cairo">Cairo</option>
</select>

<script>
  document.getElementById('cities').addEventListener('change', function () {
    console.log(`Cities selector changed to ${this.value}.`);
  });
</script>

The behavior of the second snippet can be achieved without jQuery by using document.querySelector and Array.forEach:

<select id="cities">
  <option value="paris">Paris</option>
  <option value="beijing">Beijing</option>
  <option value="cairo">Cairo</option>
</select>

<select id="countries">
  <option value="france">Paris</option>
  <option value="china">China</option>
  <option value="egypt">Egypt</option>
</select>

<script>
  document.querySelectorAll('select').forEach(select => {
    select.addEventListener('change', function () {
      console.log(`A selector was changed to ${this.value}.`);
    });
  });
</script>