How to select the first element in the dropdown using jQuery?

Highlighting selected state with .attr()

The .attr() method can set the "selected" attribute to the first option:

// jQuery .attr() playing "Tag, you're it!" with the first option
$('select option:first-child').attr("selected", "selected");


But wait, the dropdown display in the UI might not update. Here's the trick, use .prop():

// .prop() is like that reliable friend who always returns your calls
$('select option:first-child').prop('selected', true);


When using these, remember to reflect the change visually using .val() and .trigger('change'):

// Ringing a bell to notify other code "Hey, we made a change here!"
var $ddl = $('#DDLID');
$ddl.val($ddl.find('option:first').val()).trigger('change');


Dominating selection by index

Getting more advanced, sometimes it's about the index not the race. Say hello to .eq():

// "Zero, Hero!" Handling with index is like playing a game of Ultimate Tic-Tac-Toe.
$("#target").val($("#target option").eq(0).val());


Beware the quirks of dropdown manipulations

Note that messing around with attributes might not necessarily trigger events like onchange. Rely on the .val() method for consistent outcomes:

// .val() - your friendly valet, always there when you need it
$("#target").val($("#target option:first").val());


Not-so-secret best practices

In performance-critical scenarios, you might prefer ditching jQuery for raw JavaScript to minimize overhead:

// Raw JavaScript coming in, like a superhero minus the spandex!
var myDDL = document.getElementById('myID');
myDDL.selectedIndex = 0;


Why event handling matters?

Options selection often requires triggering the change event for elements that have event listeners attached. Here's how you do it:

// This triggers the "Oh, changes there!" alert for code listening into select changes
$('#selectId').val('firstOptionValue').change();


This ensures all dependent callbacks are executed, thus reflecting a real user selection.

Cross-browser compatibility

Even though jQuery masks cross-browser quirks, it's always worth validating on multiple browsers to ensure dropdown behavior consistency.

Common pitfalls and how to dodge them

If changes are not reflecting, check for multiple instances of IDs or names, and validate there's no JavaScript error interrupting with jQuery's operation.