Article Categories

Selected Reading

Display the dropdown's (select) selected value on console in JavaScript?

Javascript Web Development Object Oriented Programming

In JavaScript, you can capture the selected value from a dropdown (select element) and display it in the console using the onchange event and console.log().

HTML Structure

Here's a basic dropdown with an onchange event handler:

<select onchange="selectedSubjectName()" id="subjectName">
    <option>Javascript</option>
    <option>MySQL</option>
    <option>MongoDB</option>
    <option>Java</option>
</select>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Selected Value</title>
</head>
<body>
    <h3>Select a Subject:</h3>
    <select onchange="selectedSubjectName()" id="subjectName">
        <option>Javascript</option>
        <option>MySQL</option>
        <option>MongoDB</option>
        <option>Java</option>
    </select>

    <script>
        function selectedSubjectName() {
            var subjectIdNode = document.getElementById('subjectName');
            var value = subjectIdNode.options[subjectIdNode.selectedIndex].text;
            console.log("The selected value = " + value);
        }
    </script>
</body>
</html>

Alternative Methods

You can also get the selected value using the value property directly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alternative Method</title>
</head>
<body>
    <select onchange="showSelectedValue(this)" id="subjects">
        <option value="js">Javascript</option>
        <option value="mysql">MySQL</option>
        <option value="mongodb">MongoDB</option>
        <option value="java">Java</option>
    </select>

    <script>
        function showSelectedValue(selectElement) {
            console.log("Selected text: " + selectElement.options[selectElement.selectedIndex].text);
            console.log("Selected value: " + selectElement.value);
        }
    </script>
</body>
</html>

Using Event Listeners

For a more modern approach, you can use event listeners instead of inline event handlers:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Listener Method</title>
</head>
<body>
    <select id="subjectSelect">
        <option>Javascript</option>
        <option>MySQL</option>
        <option>MongoDB</option>
        <option>Java</option>
    </select>

    <script>
        document.getElementById('subjectSelect').addEventListener('change', function() {
            console.log("Selected: " + this.options[this.selectedIndex].text);
        });
    </script>
</body>
</html>

Key Points

selectedIndex returns the index of the selected option
options[selectedIndex].text gets the display text
value property gets the value attribute (if set)
Open browser console (F12) to see the output

Conclusion

Use onchange events with console.log() to display dropdown selections. The selectedIndex property helps access the chosen option's text or value.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next