Change the selected value of a drop-down list with jQuery

Alternative approaches and older browser compatibility

Dealing with ancient relics (IE6)

Older browsers such as Internet Explorer 6 might not be the best in interpreting new-age jQuery. Confirm compatibility and make adjustments if necessary:

if ($().jquery === '1.2.6') {
  // Retro code for our beloved IE6
  $('#dropdownId').val('yourValue').change();
}


ASP.NET specific scenarios

When you're on the battlefield with ASP.NET avoid using CSS classes, instead, pull out the ClientID weapon:

$("#<%= Control.ClientID %>").val('yourValue').change();


This acts like a homing missile, targeting the right control despite ASP.NET's convoluted ID naming schemes.

Selecting the bullseye directly

For jQuery 1.6 and later, take aim and hit directly with the .prop() method:

$('#dropdownId').prop('selectedIndex', 1); // Picks the second option. Remember, arrays start at 0!


Speaking directly to the selectedIndex property can sometimes prove to be more efficient.

Making hidden fields visible

Encountering trouble with direct selection changes? Use a hidden field to keep track:

$('#hiddenFieldId').val('yourValue'); // It's like using invisible ink!


This is like a secret note, ensuring the selected value stealthily finds its way during form submission.

Troubleshooting and debugging tips

Selector verification

Make sure the jQuery selector is on point and targets the dropdown accurately:

$('select#dropdownId').val('yourValue'); // Ensure the selector isn't on a wild goose chase!


Incorrect selectors are like prank calls, they lead to nowhere.

Paying attention to syntax

Make sure to follow the map correctly, especially using quotes around string values:

$('select').val('2'); // String type value
$('select').val(2); // Numeric type value


Respect the type! A wrong type can cause an identity crisis for your value!

Advanced concepts

Reading the selected index biometrics

To decode the selectedIndex of a dropdown, backtrace like so:

var selectedIndex = $('#dropdownId').prop('selectedIndex'); // A bit like reading a barcode!


This hands over the zero-based index of the selected option, like a treasure map giving away a secret location!

Setting preferences from a galaxy far, far away

When you have a preselected option based on a distant condition or user preference, you'll play the part of the messenger:

// A preference from another realm (server or variable)
var userPreference = 'Comedy';

// Convey the preference to the dropdown
$('#dropdownId').val(userPreference).change(); // Like playing the town crier!


Making UI reflect the Truth

At times, the UI may not immediate reflect the new reality. Use the .change() method to nudge it awake:

$('#dropdownId').val('yourValue').change(); // A bit like spiking the UI's coffee!


They can't sleep on the job! This will make sure all associated event handlers get the memo and the UI updates.