In this article, we will see how to get the selected option value in jquery. Here, we will learn how to get selected dropdown values using jquery. When you can change the dropdown at that time we will get the selected option value.
We will use :selected selector of jquery. The :selected selector is used for the option in the dropdown. It can return selected elements.
So, let's see get the selected value of the dropdown in jquery on change, jquery get the selected option value, get the selected value of the dropdown in javascript, and how to get the selected dropdown value in jquery.
Example:
In this example, we will get the value of the selected dropdown. You can get the value on change event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value - Techsolutionstuff</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("select.language").change(function(){
var selectedLanguage = $(this).children("option:selected").val();
$("p").text("You have selected the language - " + selectedLanguage);
});
});
</script>
<style>
body{
margin:100px;
}
</style>
</head>
<body>
<h2>How To Get Selected Option Value In jQuery - Techsolutionstuff</h2>
<form>
<label>Select Country:</label>
<select class="language">
<option value="laravel">Laravel</option>
<option value="php">PHP</option>
<option value="jquery">jQuery</option>
<option value="mysql">MySQL</option>
<option value="python">Python</option>
</select>
</form>
<p></p>
</body>
</html>
Output:
Example:
In this example, we will select multiple dropdown options and get value using jquery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get the multiple selected value of the dropdown in javascript - Techsolutionstuff</title>
<style>
div {
color: red;
}
body{
margin: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h3>Get the selected value of the dropdown in javascript - Techsolutionstuff</h3>
<select name="language" multiple="multiple">
<option>Laravel</option>
<option selected="selected">PHP</option>
<option>jQuery</option>
<option selected="selected">MySQL</option>
<option>Python</option>
</select>
<br><br><div></div>
<script>
$("select").change(function() {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text("You have selected the languages - " + str );
})
.trigger( "change" );
</script>
</body>
</html>
Output:
Example:
In this example, we will push the selected option value in the language array.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Multiple Option Values - Techsolutionstuff</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
var language = [];
$.each($(".language option:selected"), function(){
language.push($(this).val());
});
alert("You have selected the languages - " + language.join(", "));
});
});
</script>
</head>
<body>
<h3>jQuery Get Multiple Option Values - Techsolutionstuff</h3>
<form>
<label>Language:</label>
<select class="language" multiple="multiple" size="5">
<option>Laravel</option>
<option>PHP</option>
<option>jQuery</option>
<option>Python</option>
<option>React</option>
</select>
<button type="button">Get Values</button>
</form>
</body>
</html>
You might also like :
Top comments (0)