How To Get Selected Option Value In jQuery
jQuery provides a wide range of tools to make your web pages dynamic and interactive. One important task is selecting and manipulating the values of dropdown menus, a common feature on websites.
Whether you want to validate user inputs, trigger specific actions, or customize user experiences, understanding how to extract selected option values is essential.
In this blog, we will help you retrieve and use selected option values in your web applications. Keep scrolling to upgrade your skills:
In this example, we will retrieve the value of the selected item in a dropdown. This value can be obtained when a change event occurs.
<!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:
In this example, we will demonstrate how to select multiple options in a dropdown and retrieve their values 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:
In this example, we will add the selected option value to an array called "language."
<!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:
- Read Also: How To Get Radio Button Checked Value In jQuery
- Read Also: How To Create Dependent Dropdown In Laravel
- Read Also: Datatable Filter With Dropdown In Laravel 9
- Read Also: Laravel 9 Dynamic Line Chart Example
