Imitate Select Behavior with Button in Bootstrap - css

Question

I am working on an app that uses Bootstrap 3. I have a drop down list that is currently defined like 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 like the behavior of the drop down list because when you choose an option, its text is shown. I also like the fact that the drop down stretches to fill the available space. However, I want the dividers that Bootstrap's button drop downs provides. In an effort to get the best of both worlds, I've attempted the 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>Go Home</li>
<li class="divider"></li>
<li>Go Left</li>
<li>Go Up</li>
<li>Go Right</li>
<li>Go Down</li>
</ul>
</div>
When I choose an option, the text does not get updated though. In addition, the drop down does not stretch to fill the available space.

Answer 1

You can use the btn-block class to make the buttons and 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>Go Home</li>
<li class="divider"></li>
<li>Go Left</li>
<li>Go Up</li>
<li>Go Right</li>
<li>Go Down</li>
</ul>
</div>
The only way to get the dropdown to behave as a select control is using JavaScript and/or jQuery like 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