Bootstrap 3 Drop down select

<!-- Markup -->
<div class="btn-group btn-input clearfix">
  <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
    <span data-bind="label">Select One</span> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Another item</a></li>
    <li><a href="#">This is a longer item that will not fit properly</a></li>
  </ul>
</div>
<!-- Markup -->

<!-- styles -->
<style type="text/css">
.btn-input {
   display: block;
}
 
.btn-input .btn.form-control {
    text-align: left;
}
 
.btn-input .btn.form-control span:first-child {
   left: 10px;
   overflow: hidden;
   right: 25px;
}
 
.btn-input .btn.form-control .caret {
   margin-top: -1px;
   position: absolute;
   right: 10px;
   top: 50%;
}

.dropdown-menu
{
   width:100%;
}
</style>
<!-- styles -->

<!-- script -->
<script type="text/javascript">
	$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
		var $target = $( event.currentTarget );
		$('.glyphicon.glyphicon-ok.pull-right.selected').remove();
		$target.find('a').prepend('<span class="glyphicon glyphicon-ok pull-right selected">&nbsp;</span>');
		$target.closest( '.btn-group' ).find( '[data-bind="label"]' ).text( $target.text() ).end().children( '.dropdown-toggle' ).dropdown( 'toggle' );
		return false;
	});
</script>
<!-- script -->