Using jQuery, how can I retrieve the value of a <select>
element when it changes?
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>
Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.
Create a free Sentry account
Create a JavaScript project and note your DSN
Grab the Sentry JavaScript SDK
<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });
Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.