Jump to content
Nathan

jQuery Select Drop Down On Change Event

Recommended Posts

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>

View the demo here.

View the Prodjex Web Development blog post on JQuery Select Drop Down On Change Event.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...