205

引导程序是否支持呈现“常规”事实上的下拉列表选择框？也就是说，下拉框是一个值列表，如果选中则填充列表框的内容？

类似于此功能的东西？

http://bootstrapformhelpers.com/select/

在此处输入图像描述

4

9 回答 9

424

Bootstrap 3 使用.form-control该类来设置表单组件的样式。

<select class="form-control">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
</select>

http://getbootstrap.com/css/#forms-controls

于 2013-08-09T16:20:41.143 回答
39

您可以使用下拉组件进行引导选择...

引导程序 5（2021 年更新）

<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#" id="selectA">Select<span class="caret"></span></a>
<ul class="dropdown-menu">
     <li class="dropdown-item"><a href="#">Item I</a></li>
     <li class="dropdown-item"><a href="#">Item II</a></li>
     <li class="dropdown-item"><a href="#">Item III</a></li>
     <li class="dropdown-item"><a href="#">Item IV</a></li>
</ul>


let links = document.querySelectorAll('.dropdown-item')
links.forEach(element => element.addEventListener("click", function () {
    let text = element.innerText
    document.getElementById('selectA').innerText = text
}))

引导程序 5

原始答案（引导程序 3）

另一种选择是使 Bootstrap 下拉列表的行为类似于使用 jQuery 的选择...

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

引导程序 3

于 2014-05-01T17:30:32.870 回答
12

测试：http: //jsfiddle.net/brynner/hkwhaqsj/6/

HTML

<div class="input-group-btn select" id="select1">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
    <ul class="dropdown-menu option" role="menu">
        <li id="1"><a href="#">One</a></li>
        <li id="2"><a href="#">Two</a></li>
    </ul>
</div>

jQuery

$('body').on('click','.option li',function(){
    var i = $(this).parents('.select').attr('id');
    var v = $(this).children().text();
    var o = $(this).attr('id');
    $('#'+i+' .selected').attr('id',o);
    $('#'+i+' .selected').text(v);
});

CSS

.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}
于 2015-01-15T00:30:42.500 回答
12

另一种选择可能是使用bootstrap select。用他们自己的话来说：

使用按钮下拉菜单的 Bootstrap 自定义选择/多选，其行为类似于常规 Bootstrap 选择。

于 2015-09-20T16:15:31.667 回答
11

随着 Bootstap 中下拉语法的更改，Skelly 的简单而好用的答案现在已经过时了。而是使用这个：

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.form-group').find('button[data-toggle="dropdown"]').html(selText+' <span class="caret"></span>');
});
于 2014-08-25T21:22:34.547 回答
5

不使用 .form-control 的另一种方法是：

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


$(".dropdown-menu li a").click(function(){
  $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".btn-group").find('.btn').val($(this).data('value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button  type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Test <span class="caret"> </span>
  </button>
  <ul class="dropdown-menu">
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 2</a></li>
    <li><a href='#'>test 3</a></li>
  </ul>
</div>

于 2016-07-04T16:13:59.477 回答
3

Ben 的代码要求父 div 具有 form-group 类（我使用的是 btn-group），这是一个稍微不同的版本，它只搜索最近的 div，甚至可能更快一些。

$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});
于 2015-07-23T14:27:07.477 回答
1

Bootstrap3.form-control很酷，但对于那些喜欢或需要带有按钮和 ul 选项的下拉菜单的人来说，这里是更新的代码。我已经编辑了史蒂夫的代码，以修复跳转到哈希链接并在选择后关闭下拉菜单。

感谢史蒂夫、本和斯凯利！

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
    $(this).closest('.dropdown').removeClass("open");
    return false;
});
于 2016-01-09T12:47:45.163 回答
1

我目前正在与下拉列表作斗争，我想分享我的经验：

在某些特定情况下<select>无法使用，必须使用下拉菜单“模拟”。

例如，如果您想创建引导输入组，例如带有下拉菜单的按钮（请参阅http://getbootstrap.com/components/#input-groups-buttons-dropdowns）。不幸<select>的是，输入组不支持，它将无法正确呈现。

或者有人已经解决了这个问题吗？我会对解决方案非常感兴趣。

更复杂的是，$(this).text()如果您使用 glypicons 或字体真棒图标作为下拉内容，您不能如此简单地捕捉用户在下拉列表中选择的内容。例如： <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> 因为在这种情况下没有文本，如果您要添加一些文本，那么它也会显示在下拉元素中，这是不需要的。

我找到了两种可能的解决方案：

1）$(this).html()用于获取所选<li>元素的内容，然后检查它，但你会得到类似的东西，<a href="#0"><i class="fa fa-minus"></i></a>所以你需要玩这个来提取你需要的东西。

2）使用$(this).text()和隐藏隐藏跨度元素中的文本： <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>。对我来说，这是一个简单而优雅的解决方案，您可以放置​​您需要的任何文本，文本将被隐藏，并且您不需要 $(this).html()像选项 1) 那样对结果进行任何转换来获得您需要的内容。

我希望它很清楚并且可以帮助某人:-)

于 2016-02-29T15:59:22.577 回答