How To Get Selected Option from HTML Form Dropdown in jQuery
By Saruque Ahamed MollickHi developer, I am happy to see that someone is looking for this tutorial because once I had faced the same problem on my project. The project was on a Currency Converter PHP Script using Fixer io API .
But I was not interested to use AJAX on that project so I decided to go with JavaScript JSON. So in this lesson, I will show you how to Get Selected Option Value from Dropdown in jQuery very easily.
In my previous tutorial on the related topic, I have discussed on How to Get Form Input Field Value In jQuery.
You can take a look there if you want.
Get Selected Option Value from Dropdown in jQuery
I will create an HTML file with a simple form with a select option. (HTML dropdown list)
<!DOCTYPE html>
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
<h1>My Form</h1>
<form id="thisform" method="post">
<select id="abc">
<option value="1">I am one</option>
<option value="2">I am two</option>
<option value="3">I am three</option>
</select>
</form>
</body>
</html>Create a jQuery Function like below
$(document).ready(function(){
$("#abc").change(function(){
var anything= $("#abc option:selected").val();
});
});This code can store selected option to a variable.
Also Read,
How to select element by its attribute using jQuery?
Select option from dropdown select tag by text instead of value in jQuery
But if you want to show your selected option in a div area just use the below code snippet.
$(document).ready(function(){
$("#abc").change(function(){
var anything= $("#abc option:selected").val();
$('#id_of_your_div_where_your_gonna_print_it').text(count);
});
});
<div id="id_of_your_div_where_your_gonna_print_it"></div>Special Notes: The above code will help you to get the value of a selected option on change. But if you wish to get the Text instead of value you can use
var anything= $("#abc option:selected").text();What I did is just replaced the val() method with text() method.
I think here you will get another cool thing that you should know
Select option from dropdown select tag by text instead of value in jQuery
The full code with an example
<!DOCTYPE html>
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
<h1>My Form</h1>
<form id="thisform" method="post">
<select id="abc">
<option value="1">I am one</option>
<option value="2">I am two</option>
<option value="3">I am three</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ $("#abc").change(function(){ var anything= $("#abc option:selected").val(); $('#id_of_your_div_where_your_gonna_print_it').text(count); }); }); <div id="id_of_your_div_where_your_gonna_print_it">
</script>
</div>
</body>
</html>
Leave a Reply