Get Selected Value in Dropdown List Using JavaScript

Javascript Html Select

Dropdown lists are commonly used in web forms to allow users to select an option from a list. In many cases, it's necessary to retrieve the selected value from the dropdown list using JavaScript in order to perform certain actions or manipulate the data. In this article, we will explore different approaches to get the selected value in a dropdown list using JavaScript.

Method 1: Using the value property

The easiest way to get the selected value in a dropdown list is by using the value property of the <select> element. The value property represents the currently selected value in the dropdown list.


            // HTML
            <select id="myDropdown">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
            </select>

            // JavaScript
            var dropdown = document.getElementById("myDropdown");
            var selectedValue = dropdown.value;

            console.log(selectedValue);

In the above example, we first access the dropdown list using the getElementById method and store the reference in the dropdown variable. Then, we retrieve the selected value by accessing the value property of the dropdown element. Finally, we display the selected value in the console using the console.log method.

Method 2: Using the options property

An alternative way to get the selected value is by using the options property of the <select> element.


            // HTML
            <select id="myDropdown">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
            </select>

            // JavaScript
            var dropdown = document.getElementById("myDropdown");
            var selectedValue = dropdown.options[dropdown.selectedIndex].value;

            console.log(selectedValue);

In this approach, we use the options property to access the list of options in the dropdown. The selectedIndex property represents the index of the currently selected option in the options list. By accessing the value property of the selected option, we can retrieve the selected value.

Method 3: Using the onchange event

If you want to perform an action as soon as the user selects an option from the dropdown list, you can use the onchange event.


            // HTML
            <select id="myDropdown" onchange="handleSelection()">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
            </select>

            // JavaScript
            function handleSelection() {
                var dropdown = document.getElementById("myDropdown");
                var selectedValue = dropdown.value;

                console.log(selectedValue);
            }

In this example, we add the onchange attribute to the <select> element and set it to the name of a JavaScript function called "handleSelection". Whenever the user selects an option, the handleSelection function is automatically executed, and the selected value is retrieved.

Conclusion

In this article, we explored different methods to get the selected value in a dropdown list using JavaScript. The value property, options property, and onchange event can all be used to accomplish this task. Depending on your specific requirements, you can choose the method that suits your needs the best.

Related Questions