Set select option 'selected', by value | jQuery

You have a select element, and you need to select one of its options based on one of its values. In this case, you can use selected selector in combination with val() method to find the selected option value in a drop-down list.
$("select").val("val3");
If the field loses focus without the contents having changed, the event is not triggered. To trigger the event manually, apply jQuery change() without arguments:
$("select").val("val3").change();
run this source code Browser View
Full Source | jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("select").val("val4").change(); }); </script> </head> <body> <select id="select1"> <option value="val1">North</option> <option value="val2">East</option> <option value="val3">West</option> <option value="val4">South</option> </select> </body> </html>

jQuery val() method

The jQuery val() method returns or sets the value attribute of the selected elements.

jQuery change() method

The jQuery change() method triggers the change event, or attaches a function to run when a change event occurs.

The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.


How to set the 'selected option' of a select dropdown list with jquery

Set the selected index of a drop down list | jQuery

These above solutions seem to assume that each item in your drop down lists has a val() value relating to their position in the drop down list. Things are a little more complicated if this isn't the case. To set the selected index of a drop down list, you would use this:
$("#select1").prop("selectedIndex", 2);
run this source code Browser View
Full Source | jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#select1").prop("selectedIndex", 2); }); </script> </head> <body> <select id="select1"> <option>North</option> <option>East</option> <option>West</option> <option>South</option> </select> </body> </html>
Note that the prop() feature requires JQuery v1.6 or later.