<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <h2>timepicker dropdown</h2> </div> <div class="btn-group timepickercontainer dropdown focus-active" id="atimepicker" data-value="11:45AM"> <button type="button" data-onClick="ScrollToActive(this);" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 11:45AM <i class="caret"></i> </button> <ul class="dropdown-menu" onLoad="SetScrollValue(this);"> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="8:00AM">8:00AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="8:15AM">8:15AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="8:30AM">8:30AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="8:45AM">8:45AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="9:00AM">9:00AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="9:15AM">9:15AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="9:30AM">9:30AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="9:45AM">9:45AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="10:00AM">10:00AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="10:15AM">10:15AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="10:30AM">10:30AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="10:45AM">10:45AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="11:00AM">11:00AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="11:15AM">11:15AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="11:30AM">11:30AM</a></li> <li class="active"><a href="#" onclick="HandleTimeSelect(this);" data-value="11:45AM">11:45AM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="12:00PM">12:00PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="12:15PM">12:15PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="12:30PM">12:30PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="12:45PM">12:45PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="1:00PM">1:00PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="1:15PM">1:15PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="1:30PM">1:30PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="1:45PM">1:45PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="2:00PM">2:00PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="2:15PM">2:15PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="2:30PM">2:30PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="2:45PM">2:45PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="3:00PM">3:00PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="3:15PM">3:15PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="3:30PM">3:30PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="3:45PM">3:45PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="4:00PM">4:00PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="4:15PM">4:15PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="4:30PM">4:30PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="4:45PM">4:45PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="5:00PM">5:00PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="5:15PM">5:15PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="5:30PM">5:30PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="5:45PM">5:45PM</a></li> <li><a href="#" onclick="HandleTimeSelect(this);" data-value="6:00PM">6:00PM</a></li> </ul> <script> $(".dropdown.focus-active").on("shown.bs.dropdown", function() {$(this).find(".dropdown-menu li.active a").focus();});</script> </div> </div>

.dropdown-menu {max-height: 50vh; overflow: auto;}

function HandleTimeSelect(a){ $(a).closest(".timepickercontainer").attr("data-value", $(a).text()); $(a).closest(".timepickercontainer").find("button").first().html($(a).text() + " <i class='caret'></i>"); $(a).closest(".timepickercontainer").find("li.active").each(function() {$(this).removeClass("active");}); $(a).parent().addClass("active"); } function ScrollToActive(btn){ //console.log("scrolling down "+ $(btn).closest(".timepickercontainer").find(".dropdown-menu").first()); //$(btn).closest(".timepickercontainer").find(".dropdown-menu").first().scrollTop(600); $(btn).closest(".timepickercontainer").find(".dropdown-menu").first().on('show.bs.dropdown', function () { $(btn).closest(".timepickercontainer").find(".dropdown-menu").first().scrollTop(600); console.log("performing"); }); } function SetScrollValue(ul){ $(ul).scrollTop(600); console.log("setting scroll"); } function SetScrollValues(){ $(".dropdown.focus-active").on("shown.bs.dropdown", function() {$(this).find(".dropdown-menu li.active a").focus();}); }