Bootstrap 下拉选择项答案

【问题标题】：Bootstrap Dropdown selected itemBootstrap 下拉选择项
【发布时间】：2018-04-06 22:58:55
【问题描述】：

我最近开始使用 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 来做我期望发生的事情，这是正确的还是我在某处遗漏了什么？

【问题讨论】：

这不是默认行为。通常，您会将下拉子项连接到链接。如果它是一个链接，我希望父“按钮”在访问者点击它时简单地关闭。你可以修改它来做任何你想做的事情——你可以轻松地创建一个简单的函数来获取下拉子项的文本并更新按钮......但它不会在多个页面中持续存在。这就是你要找的吗？
我有点期待像选择元素一样工作，因此用户可以选择他们想要的内容，并且可以以某种方式捕获事件，但元素会更新以表明他们进行了更改

标签： javascript jquery twitter-bootstrap

【解决方案1】：

根据您的描述，您想要的功能是一个选择框。引导下拉菜单更适合折叠列表（想想导航栏）。

您可以使用 bootstrap-select 之类的插件，也可以编写自己的功能（我建议您编写功能）。

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

基本上，您只是在为列表中的li 项目侦听onclick，然后将ul 文本更改为li 的任何内容。

【讨论】：

嗯，有道理。我在想它被用作选择的替代品做引导样式，因为我计划将它用于过滤器选择类型菜单，但是是的，选择可能会更好

【解决方案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，选择输入也总是用于“选择”行为。

【讨论】：

【解决方案3】：

听起来你可能正在寻找一个插件。我真的很喜欢 bootstrap-multiselect。

这是它的链接。

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

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

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

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

【讨论】：