All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Get Selected Value Of Dropdown In jQuery

Last Updated : Jul 5, 2023

Get Selected Value Of Dropdown In jQuery

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>
  1. 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.
  2. 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.
  3. Next, we create the font size and weight in style.
  4. Then we style by closing our eyes.
  5. 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.
  6. The script is then closed.
  7. The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
  8. Then with the <select> and <option> tags, we have produced a drop-down list.
  9. Let's say that after choosing an element from the "option" list, we choose a certain value from the "option" list.
  10. In that instance, it will show an alert message with the element you select in the drop-down list.
  11. 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.