You can get the selected value of a <select> dropdown in jQuery using .val().

Example using a button click event

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Get Selected Option Value of Select in 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="btnValue">Get Value</button>

<script>
	$(document).ready(function(){
	    $("#btnValue").click(function(){
	        var selValue = $("#carBrand").val();
	        console.log(selValue);
	    });
	});
</script>
</body>
</html>

Description:

  • $('#carBrand').val() gets the value of the currently selected option in the dropdown.
  • console.log() prints the selected value in the browser console.

For example, if the selected option is "BMW", the console will display "bmw".

Example using .change() event

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Get Selected Option Value of Select in 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(){
	    $("#carBrand").change(function(){
	        var selValue = $(this).val();
	        console.log(selValue);
	    });
	});
</script>
</body>
</html>

Description:

  • $('#mySelect').change() triggers the function whenever the user changes the selected option in the dropdown.
  • $(this).val() gets the value of the currently selected option.
  • console.log(selValue) prints the selected value in the console.

For example, if the user selects "BMW", the console will display "bmw".

Example using .change() event with <option>

If you want to get the selected <option> specifically in jQuery on change, you can do it using the option:selected selector.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How to Get Selected Option Value of Select in 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(){
	    $("#carBrand").change(function(){
	        var selectedValue = $('#carBrand option:selected').val();
			var selectedText = $('#carBrand option:selected').text();

			console.log(selectedValue);
			console.log(selectedText);
	    });
	});
</script>
</body>
</html>

Description:

  • $('#carBrand option:selected') targets the currently selected <option> inside the dropdown.
  • .val() gets the value attribute of the selected option.
  • .text() gets the visible text of the selected option.
  • .change() runs the function whenever the user selects a different option.

Example output:

If BMW is selected:

  • bmw => value
  • BMW => text