How to Get Selected Dropdown Value on Change Event Using jQuery

A jQuery change handler lets you run code after a dropdown selection changes. Inside the handler, read the selected option with this.value, then use that value to update the page or perform another action. The examples below map each option to a background color.

Use the change() Method to Get Selected Dropdown Value on Change Event Using jQuery

In jQuery, change is the event name. change() is the shorthand method: pass a handler to bind code that responds to the event. Calling .change() with no handler instead triggers the event; it does not register a handler. For a dropdown, the handler runs when the user selects a different option.

This is a browser-page example; it is presented unexecuted, so its behavior is described rather than observed from a run. The complete page loads jQuery before the code that uses it. The select’s value attributes are the values the handler reads. The initial option has value 0, and the if/else branches map 0 through 3 to the four CSS color names. The selected option’s value is a string, so the comparisons use quoted values. Changing the selection updates the #Main div’s background color while leaving its text and border in place.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dropdown change with jQuery change()</title>
    <style>
        #Main {
            border: 5px solid green;
            background-color: lightblue;
            min-height: 100px;
            padding: 1rem;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("#bgcolor").change(function () {
                var bgcolor = this.value;

                if (bgcolor === "0") {
                    $("#Main").css("background-color", "lightblue");
                } else if (bgcolor === "1") {
                    $("#Main").css("background-color", "lightgreen");
                } else if (bgcolor === "2") {
                    $("#Main").css("background-color", "lightpink");
                } else {
                    $("#Main").css("background-color", "lightgrey");
                }
            });
        });
    </script>
</head>
<body>
    <div id="Main">
        <h1>Delftstack.com</h1>
        <label for="bgcolor">Background color:</label>
        <select name="bgcolor" id="bgcolor">
            <option value="0">Blue</option>
            <option value="1">Green</option>
            <option value="2">Pink</option>
            <option value="3">Grey</option>
        </select>
    </div>
</body>
</html>

The first option is selected when the page loads, so the panel starts light blue. Each later selection invokes the bound handler and applies the matching color. Replace the color assignments with the action your page needs, such as updating a message or filtering displayed results. Keep the handler attached to the select whose value you want to read.

Use the on() Method to Get Selected Dropdown Value on Change Event Using jQuery

You can bind the same handler with on() by passing the event name and a callback: $(selector).on('change', handler). Here, change is the event name and the function is the handler. The selector identifies the element receiving the handler. The child-selector, data, and event-map arguments are not needed for this direct dropdown example.

This second browser-page example is likewise presented unexecuted. The page below is complete and uses the same options, IDs, and color mapping as the change() example. It uses on('change', ...) to register the callback, then reads the selected option from this.value. Use this form when you want the explicit event-and-handler structure of on(); the visible result is the same background-color update.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dropdown change with jQuery on()</title>
    <style>
        #Main {
            border: 5px solid green;
            background-color: lightblue;
            min-height: 100px;
            padding: 1rem;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("#bgcolor").on("change", function () {
                var bgcolor = this.value;

                if (bgcolor === "0") {
                    $("#Main").css("background-color", "lightblue");
                } else if (bgcolor === "1") {
                    $("#Main").css("background-color", "lightgreen");
                } else if (bgcolor === "2") {
                    $("#Main").css("background-color", "lightpink");
                } else {
                    $("#Main").css("background-color", "lightgrey");
                }
            });
        });
    </script>
</head>
<body>
    <div id="Main">
        <h1>Delftstack.com</h1>
        <label for="bgcolor">Background color:</label>
        <select name="bgcolor" id="bgcolor">
            <option value="0">Blue</option>
            <option value="1">Green</option>
            <option value="2">Pink</option>
            <option value="3">Grey</option>
        </select>
    </div>
</body>
</html>

Both approaches bind a handler to the change event; neither waits for a separate button click. The first form is the jQuery shorthand, while on() names the event and callback as separate arguments. Choose one binding for a given select so the action runs once per selection change. If the handler appears not to run, check that jQuery loaded before the ready callback, the selector matches the select’s ID, and the callback is bound to the element whose value you need. A page that updates the background color is only an illustration: the same this.value can drive any application-specific work inside the callback.