Get selected text from a drop-down list (select box) using jQuery

Today, We want to share with you jquery selected option text.In this post we will show you jquery select dropdown option by value, hear for get selected value of dropdown in jquery on change we will give you demo and example for implement.In this post, we will learn about jQuery Get the Text Value of Selected Option with an example.

How to get selected text from a drop-down list using jQuery?

Example 1: By using val() method :

<html> 
<head> 
	<title>jQuery Selector</title> 
<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script> 
	<script> 
		$(document).ready(function() { 
			$("#teamsave").click(function() { 
				alert($("#playerlist").val()); 
			}); 
		}); 
	</script> 
	<style> 
		div { 
			width: 50%; 
			height: 200px; 
			padding: 10px; 
			border: 2px solid green; 
		} 
	</style> 
</head> 

<body> 
	<div> 

		<p>The selected value:</p> 
		<select id="playerlist"> 
			<option value="1">All Rounder</option> 
			<option value="2">Batsmen</option> 
		</select> 
		<br> 
		<br> 
		<button id="teamsave">Submit</button> 

	</div> 
</body> 
</html> 

Example 2: By using option:selected :

<html> 
<head> 
	<title>jQuery Selector</title> 
<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 

	<script> 
		$(document).ready(function() { 
			$("#teamsave").click(function() { 
				var player = $("#playerlist option:selected"); 
				alert(player.text()); 
			}); 
		}); 
	</script> 
	<style> 
		div { 
			width: 50%; 
			height: 200px; 
			padding: 10px; 
			border: 2px solid green; 
		} 
	</style> 
</head> 

<body> 
	<div> 

		<p>The selected Player:</p> 
		<select id="playerlist"> 
			<option value="1">Batsmen</option> 
			<option value="2">Bolwer</option> 
		</select> 
		<br> 
		<br> 
		<button id="teamsave">Submit</button> 

	</div> 
</body> 
</html> 

Free Live Chat for Any Issue

jQuery: Find the specific option tag text value of a selected option

Example : HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Find the specific option tag text value of a selected option - www.pakainfo.com</title>
</head>
<body>
<select id="playerlist">
    <option value="1">India</option>
    <option value="2">Pakistan</option>
    <option value="3">Austreliya</option>
    </select>
</body>
</html>

JavaScript Code :

var get_name = $("#playerlist option[value=2]").text();
console.log(get_name);

Download

I hope you get an idea about JavaScript set dropdown selected value by value.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.