<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <form> <div class="form-group col-md-4"> <label >Select option</label> <select class="form-control" id="area-dropdown"> <option value="all">--Select--</option> <option value="area">One</option> <option value="area">One</option> </select> </div> <div class="form-group col-md-4 route-dropdown"> <label> Dropdown 1:</label> <select class="form-control" > <option>--Select--</option> <option>One</option> <option>One</option> </select> </div> <div class="form-group col-md-4 route-dropdown"> <label> Dropdown 2:</label> <select class="form-control" > <option>--Select--</option> <option>One</option> <option>One</option> </select> </div> </form> </div> </div> <script> $(".route-dropdown").hide(); $("#area-dropdown").change(function(){ if($(this).val() == "area"){ $(".route-dropdown").show(); } if($(this).val() == "all"){ $(".route-dropdown").hide(); } if($(this).val() == "high_index"){ $("#filterbox").show(); } }); </script>