How to change the selected value of a drop-down list with jQuery?

When you need to programmatically change which option is selected within a <select> element, you can rely on the .val() method in jQuery. This sets the value attribute of the dropdown to the desired value and updates the UI accordingly.

// Suppose you have a dropdown: <select id="mySelect">...</select>

$('#mySelect').val('newValue');

1. How It Works

The string you pass to .val() should match the value attribute of one of the <option> elements in the dropdown.
If the dropdown is in a form, changing .val() will also update what’s submitted if the form is subsequently submitted.

2. Example

Consider this HTML:

<select id="mySelect">
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="cpp">C++</option>
</select>

By running:

$('#mySelect').val('py');

The dropdown will switch its displayed value to “Python”.

3. Handling Non-Existent Values

If you set a value that doesn’t exist in the <select> options, the dropdown will revert to its initial state with no visible change. Make sure the value you provide matches one of the <option> elements’ values.

4. Setting the Selected Text Instead of Value

If you don’t have a known value but do know the text, you’d first find which option has that text and then set its value. For example:

$('#mySelect option').each(function() {
  if ($(this).text() === 'Python') {
    $('#mySelect').val($(this).attr('value'));
    return false; // Break out of the each loop
  }
});

It’s generally simpler to manage by value, but you can adapt to your data structure as needed.

Level Up Your JavaScript Skills

If you’re learning jQuery or modern JavaScript, check out:

Grokking JavaScript Fundamentals – A robust foundation in JavaScript will help you handle everything from DOM manipulation to async programming effectively.
Grokking the Coding Interview: Patterns for Coding Questions – A must for sharpening your problem-solving skills for top-tier tech interviews.

For a real-world interview simulation, see Coding Mock Interviews at DesignGurus.io, where ex-FAANG engineers provide hands-on feedback to elevate your coding and communication.

In a nutshell, .val('newValue') is your go-to method for dynamically switching the selected option in a dropdown. This simple solution keeps your UI updates clean, consistent, and easy to manage.

CONTRIBUTOR

TechGrind