Get Selected Option Value jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Ashish
In this article we will show you the solution of get selected option value jQuery, a user can choose from a variety of options using a multiple-choice box. To pick numerous alternatives, keep the control key depressed on a Mac or Windows computer.
By including the attribute multiple in the choose> element, you can allow several sections in a select box.
Use jQuery:selected selection and also the val() method to find the html value of a selected item inside a pick box or dropdown list.
Pull-down lists are made utilizing the "select" element rather than the "input" tag.
In the paired tag, the opening tag "select" comes before the closing tag "/select". The option> tag must be used in order to use this tag.
Step By Step Guide On Get Selected Option Value jQuery :-
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>
TalkersCode
</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 a alert message the with element you select in the drop-down list.
Conclusion :-
The choice and option tags can be used to create drop-down menus. The user has the choice to choose one, several, or each of the options.
All of the options in a drop-down list are visible when a user selects one, even when they are not visible on the screen. They are used to save space when displaying just one item in the list.
I hope this article on get selected option value jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
