css - 在 Bootstrap 中使用按钮模拟选择行为

Question

我正在开发一个使用 Bootstrap 3 的应用程序。我有一个当前定义如下的下拉列表:

<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>

我喜欢下拉列表的行为，因为当您选择一个选项时，它的文本就会显示出来。我也喜欢这样一个事实，即下拉菜单会延伸以填充可用空间。但是，我想要 Bootstrap's button drop downs 的分隔线提供。为了两全其美，我尝试了以下方法:

<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>

当我选择一个选项时，文本并没有得到更新。此外，下拉菜单不会拉伸(stretch)以填充可用空间。

Answer 1

您可以使用 btn-block 类来设置按钮和下拉菜单的填充宽度..

   <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>

让下拉列表像选择控件一样工作的唯一方法是像这样使用 JavaScript 和/或 jQuery..

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

演示:http://codeply.com/go/KI7AAEtWeo