How to use jQuery to select a dropdown option?

Expanding your jQuery arsenal

Tactful option selection: Calling .prop() and .val()

In modern jQuery versions, the .prop() method can handle the task of setting an option, efficiently mimicking a user's selection.

// Officer JQuery reporting for duty! Option, you're selected!
$('#dropdownID option[value="desiredOption"]').prop('selected', true);


Alternatively, you can select an option by its index using .prop():

// "I choose you, option at index!"
$('select#dropdownID').prop('selectedIndex', index);


This skill is handy when you're aware of the options ordination but not their assigned values.

Event simulation: Unleashing the .trigger('change')

Mimic a user's interaction by triggering the change event subsequent to setting the value:

// Abracadabra! It's as if a user just took an action!
$("#dropdownID").val("desiredOption").trigger('change');


Doing this executes all event handlers tied to the action, mirroring user operations seamlessly.

A plain JavaScript pivot

In scenarios where jQuery might not be accessible or preferred, opt for simple JavaScript. Observe:

var dropdown = document.getElementById('dropdownID');
// The JS "force" will set this option selected!
dropdown.selectedIndex = desiredIndex;


This code snippet gives an uncomplicated alternative when jQuery is not an option — no pun intended.

Troubleshooting corner: Value-ID mishaps

Ensure that your 'dropdownID' matches your <select>'s ID attribute and your desiredOption corresponds to your desired <option>'s value attribute.

Extracting selection: The .val() magic

Discern what gear you're currently using:

// Your bike whispers to you: "This is my current gear..."
var currentGear = $("#gear-dropdown").val();


This can prove beneficial in adjusting follow-up actions or authenticating the present state.

Linking options to interactions: Events from clicks

Consider a scenario where you can switch gears without directly interacting with the dropdown {wink}:

// Link says to dropdown: "Hold my beer..."
$('a#gear-link').on('click', function() {
  $("#gear-dropdown").val('3rd Gear').trigger('change');
});


Presto, clicking the link now toggles the 3rd Gear as smoothly as if we manually picked the dropdown!

Show and tell: Implementing robust demos

Feel free to strut your jQuery prowess by creating a JSFiddle or CodePen. Incorporate .val(), .prop() and .trigger('change') to observer live outcomes and strengthen your understanding.