How to get the value of a select with jQuery

January 4, 2021 admin

In this tutorial, we are going to see how to get the value of a select with jQuery. You can simply use the jQuery :selected selector with the method val() to find the value of the selected option in a drop-down list. Here is an example:

How to get the value of a select with jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>How to get the value of a select</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$("select.language").change(function(){
				var language = $(this).children("option:selected").val();
				alert("You have selected the language : " + language);
			});
		});
		</script>
	</head> 
	<body>
		<form>
			<label>Select a language:</label>
			<select class="language">
				<option value="java">Java</option>
				<option value="php">PHP</option>
				<option value="python">Python</option>
			</select>
		</form>
	</body>
</html>

Result
Select a language:

If the value of an option is not set, the text of the <option> element will be used as the value.

MCQPractice competitive and technical Multiple Choice Questions and Answers (MCQs) with simple and logical explanations to prepare for tests and interviews.Read More