Skip to main content
jQuery

jQuery Select Drop Down On Change Event

By February 26, 2018August 20th, 2024No Comments

This example explains how you can trigger events based on user input of a drop down using jQuery.

Here’s the entire page, I have 2 drop downs.  On the page load the first drop down is shown, while the second drop down is hidden.  Once the user selects any option from the first drop down the change event is triggered and the second option is shown.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="jQuery Select Drop Down On Change Event">
    <meta name="author" content="Projex">

    <title>jQuery Select Drop Down On Change Event | Prodjex Web Development and Consulting</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/signin.css" rel="stylesheet">

    <style>
        body{background-color: grey;}
        p{color: #fff;}
        #additionalOptions{display:none;}
    </style>
</head>

<body class="text-center">

<div class="container">
    <div class="col-md-12">
        <img src="https://forums.prodjex.com/uploads/monthly_2017_12/5a49485fa77dd_logobig.png.0c19c7fc9cc393df1ad69f5ec30877c1.png"><br><br>
        <p>Select an option from the drop down menu.</p>
        <div class="form-group">
            <select class="form-control" name="options" id="options" placeholder="Options">
                <option value="">Select an option...</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control" name="additionalOptions" id="additionalOptions" placeholder="Additional Options">
                <option value="">Select an option...</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
            </select>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>
    $( "#options" ).change(function() {
        $("#additionalOptions").show();
    });
</script>

</body>
</html>

In the jQuery code you’ll see that it’s selecting the first drop down and listening for the change function.  When it fires it then shows the second dropdown.

<script>
    $( "#options" ).change(function() {
        $("#additionalOptions").show();
    });
</script>

Need help?  Check out our Web Development in Kansas City

View the demo here.

View the Prodjex Web Development form discussion on jQuery Select Drop Down On Change Event.

Tags:

Leave a Reply