# jQuery Get the Value of a Select Element on Change

> Bind a callback to the change event with .on('change', fn) and read this.value, or use addEventListener for the same result in plain JavaScript

**URL:** https://sentry.io/answers/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event):

```html
<script src="https://code.jquery.com/jquery-4.0.0.min.js"
        integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" 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')`.

```html
<script src="https://code.jquery.com/jquery-4.0.0.min.js"
        integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" 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`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) for the jQuery `$` selector and using [`.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) instead of `.on`:

```html
<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`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and [`Array.forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach):

```html
<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>
```

---

*Source: [sentry.io/answers/get-the-value-of-a-select-element-when-it-changes-in-jquery/](https://sentry.io/answers/get-the-value-of-a-select-element-when-it-changes-in-jquery/)*