Question

http://www.benknowscode.com/2013/12/bootstrap-dropdown-button-select-box-control.html

上面的链接是一个教程。

我需要帮助了解本教程中的JS实际上对下拉菜单做了什么。

以下描述对我没有意义。＆＃34;选择项目后，此代码将更改按钮标签并隐藏菜单。现在我们有一个选择框，但是，Dropdown Button上的样式与其他表单控件上的样式不匹配。当按钮中的文字太短时，按钮会收缩以适应。当该文本太长时，该按钮会扩展到其父级的边界之外：＆＃34;

谢谢，

Answer 1

这个答案与你上面提到的按钮缩小和扩展有关。

选择框宽度因文本内容而异，因为它是内联元素，您可以设置min-width来克服它。

span.listname{min-width:200px;display:inline-block}

Answer 2

试试看我的帮助......

<强> Live Demo

<div id="select-option" class="btn-group">
    <button type="button" class="btn btn-default btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <span class='listname'>Select your option </span><span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
        <li><a href="#">Option 4</a></li>
        <li><a href="#">Option 5</a></li>
    </ul>
</div>

$(function(){

  $(".dropdown-menu li a").click(function(){

    $(".dropdown-toggle .listname").text($(this).text());
  });

});

使用Bootstrap下拉按钮作为表单选择框

2 个答案: