Answers by Sentry

Set the select option 'selected' by value using jQuery

Matthew C.

The Problem

You have a <select> element with options that you want to select using jQuery. For example, you may have a button that you want to use to select a specific option:

<select id="select1">
  <option value="milk">milk</option>
  <option value="sugar">sugar</option>
  <option value="eggs">eggs</option>
</select>
<button id="btnSugar">Select sugar</button>

How do you do this?

The Solution

Using jQuery, you can get the select and button elements, and then use the jQuery .val() method to set the value of the select element:

import $ from 'jquery';

const selectEl = $('#select1');
const btnSugar = $('#btnSugar');

selectEl.on('change', () => {
  console.log('changed');
});

btnSugar.on('click', () => {
  selectEl.val('sugar').change();
});

When a select element’s value changes because a user selected a different value from the menu of options, a “change” event occurs on the select element. Changing the select’s value using the jQuery .val() method does not trigger this “change” event. If you need to trigger the “change” event, you can trigger it manually using the jQuery .change() method.

You can also set the value of a select element using vanilla JavaScript:

const selectEl = document.getElementById('select1');
const btnSugar = document.getElementById('btnSugar');

selectEl.addEventListener('change', () => {
  console.log('changed');
});

btnSugar.addEventListener('click', () => {
  selectEl.value = 'sugar';
  selectEl.dispatchEvent(new Event('change'));
});

Setting a select element’s value using its value property does not trigger the “change” event on the select element, like the jQuery .val() method. To manually call the “change” event using vanilla JavaScript, you can use the dispatchEvent() method to send a “change” Event object to the select element.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
  1. Configure your DSN
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.

learn more about sentryjoin our discord
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.