Table of contents

Get The Selected Dropdown Value on Change Event

In this post, I will share with you how to get the selected dropdown value from the select box on the change event using jquery. One of the important functionality to tackle in form processing like determining the value of a selected dropdown before submitting it to your server-side.

 

Here is the complete code on how to do it.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Get The Selected Dropdown Value on Change Event using jQuery?</title>
</head>
<body>
	<h1>Get The Selected Dropdown Value on Change Event using jQuery?</h1>

	<form id="form1">
		<select id="country">
			<option value="">Select country</option>
			<option value="Canada">Canada</option>
			<option value="United States">United States</option>
			<option value="United Kingdom">United Kingdom</option>
			<option value="Finland">Finland</option>
		</select>
		<br/><br/>
	</form>

	<br/><br/><br/><br/>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$("#country").on("change", function() {
				var country = $(this).val();

				alert(country)
			});
		});
	</script>
</body>
</html>

 

I hope it helps. Thanks for reading happy coding :)

Read next