Sentry Answers>JavaScript>

Set the select option 'selected' by value using jQuery

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:

Click to Copy
<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:

Click to Copy
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:

Click to Copy
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.

  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.