css - Imitate Select Behavior with Button in Bootstrap -

i working on app uses bootstrap 3. have drop down list defined this:

<select id="options" class="form-control">   <option>go home</option>   <option>go left</option>   <option>go up</option>   <option>go right</option>   <option>go down</option> </select> 

i behavior of drop down list because when choose option, text shown. fact drop down stretches fill available space. however, want dividers bootstrap's button drop downs provides. in effort best of both worlds, i've attempted following:

<div class="btn-group">   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">     go home... <span class="caret"></span>   </button>   <ul class="dropdown-menu" role="menu">     <li><a href="#">go home</a></li>     <li class="divider"></li>     <li><a href="#">go left</a></li>     <li><a href="#">go up</a></li>     <li><a href="#">go right</a></li>     <li><a href="#">go down</a></li>   </ul> </div> 

when choose option, text not updated though. in addition, drop down not stretch fill available space.

you can use btn-block class make buttons , dropdown fill width..

   <div class="btn-group btn-block">               <button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">                         go home... <span class="caret"></span>               </button>               <ul class="dropdown-menu btn-block" role="menu">                     <li><a href="#">go home</a></li>                     <li class="divider"></li>                     <li><a href="#">go left</a></li>                     <li><a href="#">go up</a></li>                     <li><a href="#">go right</a></li>                     <li><a href="#">go down</a></li>               </ul>    </div> 

the way dropdown behave select control using javascript and/or jquery this..

$(".dropdown-menu li a").click(function(){   var seltext = $(this).text();   $(this).parents('.btn-group').find('.dropdown-toggle').html(seltext+' <span class="caret"></span>'); }); 

demo: http://codeply.com/go/ki7aaetweo