<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <!-- Based on: http://bootsnipp.com/snippets/featured/multiple-control-input-group --> <br/> <div class="container"> <div class="row"> <div class="form-group"> <label for="inpuFname">Text input with dropdown select</label> <div class="input-group"> <div class="input-group-btn bs-dropdown-to-select-group"> <button type="button" class="btn btn-default dropdown-toggle as-is bs-dropdown-to-select" data-toggle="dropdown"> <span data-bind="bs-drp-sel-label">Select...</span> <input type="hidden" name="selected_value" data-bind="bs-drp-sel-value" value=""> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu" style=""> <li data-value="1"><a href="#">One</a></li> <li data-value="2"><a href="#">Two</a></li> <li data-value="3"><a href="#">Three</a></li> </ul> </div> <input type="text" value="" class="form-control" name="text"> </div> </div> Check the hidden field for values! </div> </div>

$(document).ready(function(e){ $( document ).on( 'click', '.bs-dropdown-to-select-group .dropdown-menu li', function( event ) { var $target = $( event.currentTarget ); $target.closest('.bs-dropdown-to-select-group') .find('[data-bind="bs-drp-sel-value"]').val($target.attr('data-value')) .end() .children('.dropdown-toggle').dropdown('toggle'); $target.closest('.bs-dropdown-to-select-group') .find('[data-bind="bs-drp-sel-label"]').text($target.context.textContent); return false; }); });