How to Get Selected Value in Dropdown List using JavaScript?

Last Updated : 08 Oct, 2024

A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript.

Basic HTML Structure for a Dropdown

To create a dropdown list, you will use the following HTML structure:

<select id="dropdown-id">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

This syntax create a dropdown list with three options HTML, CSS, and JavaScript. Each options has an individual attribute (for example - value="html").

To create a dropdown list, You can refer this article How to create the dropdown menu?.

Get the Selected Value from Dropdown using DOM value Property

To get the selected value from dropdown list, we need to use JavaScript. The HTML DOM value property is used to get the selected value of a dropdown list item.

Syntax

selectedElement.value;

Example: The below code uses the value property to get the value of the selected dropdown item.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Get Selected Value in Dropdown
        List using JavaScript
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <p>
        <b>How to get selected value in dropdown
            list using JavaScript?</b>
    </p>

    <label>Select one from the given options:</label>
    <select id="select1">
        <option value="free">Free</option>
        <option value="basic">Basic</option>
        <option value="premium">Premium</option>
    </select>

    <p>
        The value of the option selected is:
        <span class="output"></span>
    </p>

    <button onclick="getOption()">
        Check option
    </button>

    <script>
        function getOption() {
            selectElement = 
                  document.querySelector('#select1');
            output = selectElement.value;
            document.querySelector('.output').textContent = output;
        }
    </script>
</body>

</html>

Output

Get the Selected Value from Dropdown using DOM selectedIndex Property

The selectedIndex property gives you the index (position) of the currently selected option in the dropdown list. This index starts at 0. If no option is selected, it returns -1. You can then use this index to find the value of the selected option.

Syntax

SelectElement.options[selectedElement.selectedIndex].value;

Example: The eblow example implements the selectedIndex property to get the value of selected dropdown item.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Get Selected Value in Dropdown
        List using JavaScript
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <p>
        <b>How to get selected value in dropdown
            list using JavaScript?</b>
    </p>

    <label>Select one from the given options:</label>
    <select id="select1">
        <option value="free">Free</option>
        <option value="basic">Basic</option>
        <option value="premium">Premium</option>
    </select>

    <p>
        The value of the option selected is:
        <span class="output"></span>
    </p>

    <button onclick="getOption()">
        Check option
    </button>

    <script>
        function getOption() {
            selectElement =
                document.querySelector('#select1');
            output =
                selectElement.options
                [selectElement.selectedIndex].value;
            document.querySelector('.output').textContent = output;
        }
    </script>
</body>

</html>