In modern web development, dynamically updating form elements is a very common task. Whether you are building country-state dropdown chains or pre-populating fields from an API database payload, learning how to change selected value of dropdown using jquery is an essential skill.
In this guide, we will explore the three main techniques to change selected value of dropdown using jquery, show how to trigger change events programmatically, and provide interactive examples.
Method 1: Change Dropdown Selection by Option Value (Recommended)
The standard and most efficient way to change the selected option in a dropdown is using the jQuery .val() method. This method targets the value attribute of the <option> element.
// Select the option with value "US"
$("#countryDropdown").val("US");CRITICAL: Triggering the Change Event
When you change a dropdown’s value programmatically using .val(), browser-native event listeners (like onchange) or jQuery .change() triggers do **not** run automatically. To ensure your UI updates correctly, you must chain the .change() or .trigger('change') method immediately after setting the value:
// Change value and execute change event listeners
$("#countryDropdown").val("US").change();Method 2: Change Dropdown Selection by Visible Text
Sometimes, your script only knows the visible label text (e.g., “United States”) rather than the underlying attribute value (e.g., “US”). In such cases, you can filter the option tags by their text content and set their selected property to true:
// Select the option that has the text "Canada"
$("#countryDropdown option").filter(function() {
return $(this).text() === "Canada";
}).prop("selected", true).change();Method 3: Change Dropdown Selection by Index Number
If you want to select an option based on its position in the list (for instance, choosing the first option or third option), you can use jQuery’s .eq() method. Remember that indices are zero-based (0 is the first option, 1 is the second, etc.):
// Select the third option (index 2) in the dropdown
$("#countryDropdown option").eq(2).prop("selected", true).change();Comparison of Selection Methods
Here is a summary table comparing the three different ways to change selected value of dropdown using jquery:
| Method | jQuery Syntax Example | Best Use Case |
|---|---|---|
| By Value | $('#dropdown').val('val').change(); | When you know the exact database code/value (Most common) |
| By Text | $('#dropdown option').filter(...).prop('selected', true); | When you only have the user-facing text label |
| By Index | $('#dropdown option').eq(idx).prop('selected', true); | When you want to reset to default (index 0) or select by position |
Complete HTML & jQuery Example
You can use the following complete, responsive HTML boilerplate containing interactive buttons to test each selection method locally:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Dropdown Selection Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.button-group button { margin: 5px; padding: 8px 12px; cursor: pointer; }
.output { margin-top: 15px; font-weight: bold; color: blue; }
</style>
</head>
<body>
<h3>Select a Country:</h3>
<select id="countryDropdown">
<option value="IN">India</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="UK">United Kingdom</option>
</select>
<div class="button-group">
<button id="btnVal">Select "CA" (By Value)</button>
<button id="btnText">Select "United States" (By Text)</button>
<button id="btnIdx">Select 4th Option (By Index)</button>
</div>
<div class="output" id="outputConsole">Current Selection: India</div>
<script>
$(document).ready(function() {
// Listen for change events
$("#countryDropdown").on("change", function() {
var selectedText = $(this).find("option:selected").text();
var selectedVal = $(this).val();
$("#outputConsole").text("Current Selection: " + selectedText + " (Value: " + selectedVal + ")");
});
// Button actions
$("#btnVal").on("click", function() {
$("#countryDropdown").val("CA").change();
});
$("#btnText").on("click", function() {
$("#countryDropdown option").filter(function() {
return $(this).text() === "United States";
}).prop("selected", true).change();
});
$("#btnIdx").on("click", function() {
$("#countryDropdown option").eq(3).prop("selected", true).change();
});
});
</script>
</body>
</html>Summary
To conclude, using .val() combined with .change() is the recommended standard way to change dropdown selections in jQuery. For other front-end validations, check out our guide on jQuery Mobile Number Validation.
[…] Undoing commits locally is a standard Git operation. Use –soft to keep changes staged, –mixed to unstage changes, and –hard to discard everything. Make sure you only reset commits that have not been pushed to a remote repository. For other developer workflows such as dynamic interface building, check out our tutorial on changing drop-down options with jQuery. […]