Get Selected Value Of Dropdown In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Ashish
In this article we will show you the solution of get selected value of dropdown in jQuery, jQuery may be used to retrieve the drop-down list's selected values.To comprehend this post, we'll first require jQuery,a jQuery selector,and the jQuery val () method.
After that, a number of examples will be used to help us understand this subject.
To make drop-down menus, utilize the choose and option tags. They enable the user to pick one or more selections from either a list of choices.
Although though they are not shown on the screen, the all options are visible when users choose from a drop-down list.
They are used to save space when just an item from the list is displayed.
The various attributes of the <select> tag include:
Multiple: It's employed to enable the <select> tag to support a variety of selections.
By default, it can accept just one user-selected choice. The user must select options while simultaneously pressing the mouse button.
Name: It serves to identify the pull-down list.
The several characteristics used with the <option> tag include the following:
Value: It acts as a stand-in for the value entered during form submission. Inside the absence of a value attribute, the text of an option tag's title is utilized.
When a form first loads in a browser, the word "Selected" is used to denote the choice that has since been made.
Step By Step Guide On Get Selected Value Of Dropdown In jQuery :-
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>
Get drop-down using jQuery
</title>
<style>
h1 {
color: green;
}
h5 {
color: green;
}
h4 {
color: green;
}
p {
color: red;
}
.select {
margin: 40px;
width: 60%;
height: 300px;
padding: 30px;
border: 2px solid green;
}
body {
background-color: pink;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script>
$(document).ready (function () {
$("select.country").change (function () {
var selectedCountry = $(this).children("option:selected").val();
alert ("You have selected the country - " + selectedCountry);
});
});
</script>
</head>
<body>
<div class ="select">
<center>
<h1> Example 1 </h1>
<p> <b> Get Selected Value in drop-down using jQuery </b> </p>
<form action="#" method ="post" >
<label> <h4> Select Country from drop-down list: </h4> <br> </label>
<select class="country">
<option value="usa"> United States </option>
<option value="india"> India </option>
<option value="uk"> United Kingdom </option>
<option value ="brazil"> Brazil </option>
<option value ="germany"> Germany </option>
</select>
</form>
</center>
</div>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then we style by closing our eyes.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then with the <select> and <option> tags, we have produced a drop-down list.
- Let's say that after choosing an element from the "option" list, we choose a certain value from the "option" list.
- In that instance, it will show an alert message with the element you select in the drop-down list.
- Then we close </select> </form> </center> </div> </body> </html>
Conclusion :-
I hope this article on get selected value of dropdown in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
