<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class='border-4 border-dark p-4 rounded' id='basicInfo'> <div class='form-group'> <label for='actionSource' class='text-primary'>Source of Action</label> <select class='form-control' id='actionSource'> <option value=0>Choose One</option> <option value='Goals and Objectives'>Goals and Objectives</option> <option value='New Construction Program'>New Construction Program</option> <option value='Planning Yard'>Planning Yard</option> <option value='Other'>Other</option> </select> <div class='form-group accordion collapse' data-toggle='collapse'> <label for='gando' class='text-primary'>Command Objective</label> <select class='form-control' id='gando'> <option value=0>Choose an Objective</option> </select> </div> <div class='form-group edit'> <label for='actionStatus' class='text-primary'>Action Status</label> <select class='form-control' id='actionStatus'> <option value=0>Select Status</option> <option value='Open'>Open</option> <option value='Closed'>Closed</option> </select> </div> <label for='actionTitle' class='text-primary'>Action Title</label> <input type='text' class='form-control' placeholder='Action Title' id='actionTitle'> <label for='samsDesc' class='text-primary'>Action Description</label> <textarea class='form-control' id='samsDesc' rows='4' placeholder='Action Description'></textarea> <div class='form-group row'> <div class='col'> <label for='samsDept' class='text-primary'>Department</label> <select class='form-control' id='samsDept'> <option value=0>Choose a Department</option> </select> </div> <div class='col'> <label for='samsDue' class='text-primary'>Due Date</label> <div class='input-group date' data-provide='datapicker'> <input type='text' class='form-control' id='samsDue'> </div> </div> <div class='col'> <label for='assignedTo' class='text-primary'>Assigned To</label> <input type='text' class='form-control' id='assignedTo'> </div> </div> <div class='form-group row edit border-top border-dark pt-4' id='updates'> <div class='col'> <label for='latestUpdate' class='text-primary'>Latest Action Update</label> <textarea class='form-control' id='latestUpdate' rows='4' placeholder='Latest Action Update'></textarea> </div> <div class='col'> <label for='allUpdates' class='text-primary'>Latest Action Update</label> <textarea class='form-control' id='allUpdates' rows='4' placeholder='All Action Updates'></textarea> </div> </div> </div> </div> <div id='buttons' class='form-control d-flex justify-content-end'> <button type='button' class='m-2 btn btn-primary disabled'>Submit</button><button type='button' class='m-2 btn btn-danger'>Cancel</button> </div> </div>

.border-4 { border-style:solid; border-width:4px; }

$("#actionSource").on('change', function(){ alert("Changed"); });