Bootstrap 3下拉选择

Question

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

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

第一:

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

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

第二版:

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

这个很好看:

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

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

我错过了什么？请帮忙.

Answer 1

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

这是你想要的？在这里演示

<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

如果你想实现这一点,只需按住下拉按钮并将其设置为选择框的样式.代码在这里和下面.

.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>');    
})

如果你有这样的多个自定义下拉菜单,你可以使用这个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示例

Answer 4

我想扩展 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);
}