title: Imitate Select Behavior with Button in Bootstrap
body: <p>I am working on an app that uses Bootstrap 3. I have a drop down list that is currently defined like this:</p>
  
  <pre><code>&lt;select id="options" class="form-control"&gt;
    &lt;option&gt;Go home&lt;/option&gt;
    &lt;option&gt;Go Left&lt;/option&gt;
    &lt;option&gt;Go Up&lt;/option&gt;
    &lt;option&gt;Go Right&lt;/option&gt;
    &lt;option&gt;Go Down&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>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 <a href="http://getbootstrap.com/components/#btn-dropdowns" rel="nofollow">Bootstrap's button drop downs</a> provides. In an effort to get the best of both worlds, I've attempted the following:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;
      Go Home... &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" role="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Go Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Go Left&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Go Up&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Go Right&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Go Down&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>