Question

我们正在尝试使用bootstrap重新实现我们的注册表单。我们的注册表单包含一个代表公司类型的下拉列表。我已在网上广泛搜索，但我没有看到任何表格输入是下拉列表的例子。

Bootstrap提供了大量与各种操作相关的下拉列表示例，但我需要的是下拉输入。我提出了两个解决方案：

首先：

<label>Type of Business</label>
<select class="form-control">
    <option>small</option>
    <option>medium</option>
    <option>large</option>
</select>

这里有一个问题：虽然盒子本身的样式正确但是下拉本身没有应用样式。

enter image description here

第二版：

<div class="btn-group">
    <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select Business type <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">small</a></li>
        <li><a href="#">medium</a></li>
        <li><a href="#">large</a></li>
    </ul>
</div>

这个很好看：

enter image description here

但它是一个按钮。选择一个选项后，我不想执行任何操作，只需更改文本并将选择与相应的输入字段绑定即可。

这两种方法都是我行动的错误选择。我拒绝相信Bootstrap不包含绑定到输入字段的简单下拉单选组件。

我错过了什么？请帮忙。

Answer 1

我们刚刚将我们的网站切换到bootstrap 3并且我们有一堆表格......不是很有趣但是一旦你掌握了它就不会太糟糕了。

这是你在找什么？ Demo Here

<div class="form-group">
  <label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
  <div class="col-sm-6 col-md-4">
    <select id="company" class="form-control">
      <option>small</option>
      <option>medium</option>
      <option>large</option>
    </select> 
  </div>
</div>

Answer 2

如果你想要实现this，只需按住下拉按钮并将其设置为选择框样式。代码为here及以下。

.btn {
    cursor: default;
    background-color: #FFF;
    border-radius: 4px;
    text-align: left;
}

.caret {
    position: absolute;
    right: 16px;
    top: 16px;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    background-color: #FFF;    
}

.btn-group.open .dropdown-toggle {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)
}

.btn-group {width: 100%}
.dropdown-menu {width: 100%;}

要使按钮像选择框一样工作，您需要添加的是这个微小的JavaScript代码：

$('.dropdown-menu a').on('click', function(){    
    $('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');    
})

如果你有multiple这样的自定义下拉菜单，你可以使用这个javascript代码：

$('.dropdown-menu a').on('click', function(){    
    $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');    
})

Answer 3

您还可以将“有效”类添加到所选项目中。

$('.dropdown').on( 'click', '.dropdown-menu li a', function() { 
   var target = $(this).html();

   //Adds active class to selected item
   $(this).parents('.dropdown-menu').find('li').removeClass('active');
   $(this).parent('li').addClass('active');

   //Displays selected text on dropdown-toggle button
   $(this).parents('.dropdown').find('.dropdown-toggle').html(target + ' <span class="caret"></span>');
});

请参阅jsfiddle example

Answer 4

我一直在寻找一个不错的选择下拉列表，我发现了一个很好的选择。所以我要把它留在这里。它叫做bootsrap-select

here's链接。看看这个。它有可编辑的下拉菜单，组合下拉等等。轻而易举地添加到您的项目中。

如果链接死亡，只需通过silviomoreto.github.io搜索 bootstrap-select 。这更好，因为它是一个普通的选择标签

Answer 5

我想扩展paulalexandru的答案，并在此处提供完整的解决方案，该解决方案通常与引导程序下拉列表一起使用，并更新主要按钮的内容以及所选选项中的值。

引导下拉列表以这种方式定义：

<div class="btn-group" role="group">
  <button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
    Option 1 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#" data-value="1">Option 1</a></li>
    <li><a href="#" data-value="2">Option 2</a></li>
    <li><a href="#" data-value="3">Option 3</a></li>
  </ul>
</div>

除了标准引导下拉代码之外，还有data-value属性用于在每个下拉选项中存储值（在<a>元素中）。

现在的JS代码。我创建了处理下拉列表的函数：

function dropdownToggle() {
    // select the main dropdown button element
    var dropdown = $(this).parent().parent().prev();

    // change the CONTENT of the button based on the content of selected option
    dropdown.html($(this).html() + '&nbsp;</i><span class="caret"></span>');

    // change the VALUE of the button based on the data-value property of selected option
    dropdown.val($(this).prop('data-value'));
}

当然我们需要添加事件监听器：

$(document).ready(function(){
    $('.dropdown-menu a').on('click', dropdownToggle);
}

Answer 6

显示的下拉列表取决于您的浏览器是什么，因为无法为某些人设置此样式。它看起来像你的IE9，但在Chrome中会看起来很不一样。

你可以使用这样的东西：

http://silviomoreto.github.io/bootstrap-select/

这将使您的选择框在浏览器中更加一致。

Answer 7

试试这个：

<div class="form-group">
     <label class="control-label" for="Company">Company</label>
     <select id="Company" class="form-control" name="Company">
         <option value="small">small</option>
         <option value="medium">medium</option>
         <option value="large">large</option>
     </select> 
 </div>

Answer 8

;(function ($) {
    $.fn.bootselect = function (options) {
        this.each(function () {
            var os = jQuery(this).find('option');
            var parent = this.parentElement;
            var css = jQuery(this).attr('class').split('input').join('btn').split('form-control').join('');
            var vHtml = jQuery(this).find('option[value="' + jQuery(this).val() + '"]').html();
            var html = '<div class="btn-group" role="group">' + '<button type="button" data-toggle="dropdown" value="1" class="btn btn-default ' + css + ' dropdown-toggle">' +
                vHtml + '<span class="caret"></span>' + '</button>' + '<ul class="dropdown-menu">';
            var i = 0;
            while (i < os.length) {
                html += '<li><a href="#" data-value="' + jQuery(os[i]).val() + '" html-attr="' + jQuery(os[i]).html() + '">' + jQuery(os[i]).html() + '</a></li>';
                i++;
            }
            html += '</ul>' + '</div>';
            var that = this;
            jQuery(parent).append(html);
            jQuery(parent).find('ul.dropdown-menu > li > a').on('click', function () {
                jQuery(parent).find('button.btn').html(jQuery(this).html() + '<span class="caret"></span>');
                jQuery(that).find('option[value="' + jQuery(this).attr('data-value') + '"]')[0].selected = true;
                jQuery(that).trigger('change');
            });
            jQuery(this).hide();
        });
    };
}(jQuery));


jQuery('.bootstrap-select').bootselect();

Answer 9

我找到了一个更好的图书馆将普通的<select> <option>转换为bootsrap按钮的下拉格式。

https://developer.snapappointments.com/bootstrap-select/

Bootstrap 3下拉选择

9 个答案: