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.

Join the discussionCome work with us
Share on Twitter
Bookmark this page
Ask a questionImprove this Answer

Related Answers

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

© 2023 • Sentry is a registered Trademark
of Functional Software, Inc.