jQuery Dropdown Selected Value
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this article we will show you the solution of jQuery dropdown selected value, with the aid of jQuery, we will discover how to retrieve selected values from the drop-down list.
To start, we'll use jQuery, a jQuery selector, and the jQuery val () method to understand this article.
Step By Step Guide On jQuery Dropdown Selected Value :-
It is simple to modify the value property from the a drop-down list with just one single line of code when using jQuery.
Assume you need to choose one of a select element's alternatives based on a specific values.
Get selected information from the a drop-down list is simple with jQuery. Use the val() function to modify a drop-down list's selected value.
Why do you employ the term "jQuery"?
A JavaScript library with many features, jQuery is quick, light, compact, and easy to use.
<script src ="https://code.jquery.com/jquery-3.5.1.min.js"> </script>
To locate the value of the selected option in a drop-down list, use the jQuery: selected selector along with the val () method.
The jQuery selector:
This declaration is applied to an HTML element.
Consider the words selected, checked, etc.
In order to indicate the default selection whenever the form is first loaded, use the word Selected.
val() method in jQuery:
The val () methods in jQuery can be used to retrieve the value of form elements or to modify the value of an attribute that is relevant to the selected elements.
Syntax :-
$(selector).val ();
Drop-down menu with the tags "select" and "option."
Drop-down menus are made to use the select & option tags. They enable the user to pick one or more selections from the a list of choices.
When users select a drop-down list, all the options are visible even though they are not displayed on the screen.
Since only one item from the list is displayed, they are utilised to conserve space.
Instead of using the "input" tag, the "select" element is used to create pull-down lists. The opening tag "select" precedes the closing tag "/select" in the paired tag. Use of this tag requires use of the option> tag.
The <select> tag's different characteristics include:
Multiple: It's used to make the select> tag capable of accepting a wide range of selections.
It can accept a single user-selected option by default. The user must simultaneously push the mouse button and pick various options.
Name: It's used to give the pull-down list a name.
The following are the many attributes used with the option> tag:
Value: It serves as a placeholder for the value given with a form submission. The <option> tag's title elements are used in the absence of the value attribute.
Selected: When a form is first loaded in a browser, it is used to indicate the option that has already been made.
<! DOCTYPE html>
<html>
<head>
<title>
jquery dropdown selected value
</title>
<style>
body {
background-color: grey;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script>
$(document).ready (function () {
$("select.fruits").change (function () {
var selectedFruits = $(this).children("option:selected").val();
alert ("You have selected the fruit - " + selectedFruits);
});
});
</script>
</head>
<body>
<div class ="select">
<center>
<h1> Talkerscode</h1>
<p> <b> Jquery dropdown selected value </b> </p>
<form action="#" method ="post" >
<label> <h4> Select Fruits from drop-down list: </h4> <br> </label>
<select class="fruit">
<option value="apple"> Apple </option>
<option value="cherry"> Cherry </option>
<option value="strawberry"> Strawberry </option>
<option value ="grapes"> Grapes </option>
<option value ="mango"> Mango </option>
</select>
</form>
</center>
</div>
</body>
</html>
- Our code begins with HTML and HEAD tags.
- Next, we give the page's title.
- The backdrop colour is then set using CSS style.
- Next, we use script to import the jQuery library.
- We then begin our script.
- In the script, the ready() method is used to run the jQuery code.
- Next, select method is used.
- Next, we construct a variable called selectedFruits that keeps the values, or the names of the fruits.
- With this, our script comes to a close.
- Following that, our body of code is started.
- We write some content and add a heading.
- Following that, we begin our form, which uses the post technique.
- The dropdown list is then made.
- BODY & HTML tags are used to finish our code.
Conclusion :-
As a result, we have successfully acquired knowledge of the jQuery dropdown select value idea.
We also learn a little bit about select tags. Moreover, we discovered jQuery Selector.
I hope this article on jQuery dropdown selected value helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
