To set a selected value in a <select> dropdown using jQuery, you can use the .val() method.

One Page Load

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Set Selected Value in a Select Dropdown Using jQuery?</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<select id="carBrand">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
</select>

<script>
	$(document).ready(function(){
	    // Set selected value
    	    $('#carBrand').val('bmw');
	});
</script>
</body>
</html>

Description:

  • $('#carBrand') selects the dropdown element.
  • .val('bmw') sets the selected option whose value is "bmw".
  • jQuery automatically finds the matching <option> and marks it as selected.

Set value on button click

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Set Selected Value in a Select Dropdown Using jQuery?</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<select id="carBrand">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
</select>

<button id="setValue">Set Value</button>

<script>
	$(document).ready(function(){
	    $("#setValue").click(function(){
	    	// Set selected value
    	        $('#carBrand').val('bmw');
    	    });
	});
</script>
</body>
</html>

To set a selected value using the <option> selector in jQuery, you can use .prop('selected', true).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Set Selected Value in a Select Dropdown Using jQuery?</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<select id="carBrand">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
</select>

<button id="setValue">Set Value</button>

<script>
	$(document).ready(function(){
	    // Set BMW as selected using option selector
            $('#carBrand option[value="bmw"]').prop('selected', true);
	});
</script>
</body>
</html>

Description:

  • $('#carBrand option[value="bmw"]') finds the <option> inside the select whose value is "bmw".
  • .prop('selected', true) marks that option as selected.
  • This directly sets the selected state on the <option> element instead of using .val().

Alternative by Text

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Set Selected Value in a Select Dropdown Using jQuery?</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<select id="carBrand">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
</select>

<button id="setValue">Set Value</button>

<script>
	$(document).ready(function(){
	    $('#carBrand option').filter(function () {
		    return $(this).text() === "Audi";
	    }).prop('selected', true);
	});
</script>
</body>
</html>