Question

我最近开始使用Bootstrap，我正在查看下拉菜单功能。

我不知道我是否遗漏了一些东西，但我认为下拉菜单按钮应显示已选择的内容。例如，如果我有以下下拉列表

Select Item <---This is the button
-Item 1 <---This is the item
-Item 2 <---This is the item
-Item 3 <---This is the item

如果用户选择“项目1”，那么我希望按钮文本更改为“项目1”，以便用户知道选择了什么，而在用户点击项目的下拉列表中，下拉菜单关闭，文字没有改变。这似乎是应该发生的基本事情，所以我认为我错过了一些东西，然而，Bootstrap网站上的例子似乎显示了同样的事情，事实上它做到了这一点，我没有看到下拉点的意义。

当谷歌搜索这个时，唯一的实现似乎是长期错综复杂的javascript来做我期望发生的事情，这是正确的还是我在某处遗漏的东西？

Answer 1

根据您的描述，您需要的功能是一个选择框。对于折叠列表（想想导航条），引导下拉更多。

你可以使用像bootstrap-select这样的插件，或者你可以编写自己的功能（我建议写你的功能）。

这是一个模拟选择框的小模型： https://jsfiddle.net/eanzfcu1/

基本上，您只是在为列表的onclick项目收听li，然后将ul文本更改为li的所有内容。

Answer 2

Bootstrap下拉列表用于导航/菜单，其样式与其他按钮一致。

如果您希望它具有“选择”行为，那么它实际上并不是很多“长期错综复杂的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://www.codeply.com/go/Msi58Gy11u

OFC，选择输入也始终存在“选择”行为。

Answer 3

听起来好像你正在寻找一个插件。我非常喜欢bootstrap-multiselect。

这是指向它的链接。

http://davidstutz.github.io/bootstrap-multiselect/

我复制粘贴下面的一个简单示例，只需运行代码段

＆＃13;

    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<select id="example-getting-started" >
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

＆＃13;

Bootstrap Dropdown选中的项目

3 个答案: