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

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();
});
Click to Copy

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'));
});
Click to Copy

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.