Bootstrap 3 下拉选择 [英] Bootstrap 3 dropdown select

问题描述

我们正在尝试使用引导程序重新实现我们的注册表单.我们的注册表单包含一个代表公司类型的下拉列表.我在网上进行了广泛的搜索，但没有看到任何表单输入是下拉菜单的示例.

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

首先:

业务类型<select class="form-control"><option>small</option><option>medium</option><option>大</option></选择>

这里有一个问题:虽然框本身的样式正确，但下拉本身没有应用任何样式.

第二个版本:

<button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">选择业务类型<span class="caret"></span><ul class="dropdown-menu" role="menu"><li><a href="#">small</a></li><li><a href="#">medium</a></li><li><a href="#">大</a></li>

这个看起来不错:

但它是一个按钮.选择选项后，我不希望执行所有我想要的操作是更改文本并使用相应的输入字段绑定选择.

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

我错过了什么?请帮忙.

解决方案

如果你想实现这个只需保留下拉按钮并将其样式设置为选择框即可.代码位于此处及下方.

.btn {光标:默认；背景颜色:#FFF；边框半径:4px；文本对齐:左；}.插入符{位置:绝对；右:16px；顶部:16px；}.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {背景颜色:#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 {宽度:100%}.下拉菜单{宽度: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>');})

We are trying re-implement our sign-up form with bootstrap. Our sign up form contains a drop-down list which represents a company type. I have searched extensively online but I do not see any example where a form input would be a drop down.

Bootstrap gives a ton of examples of drop-downs related to various action but what I need is a drop down input. I have come up with two solutions:

First:

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

There is a problem here: although the box itself is styled correctly the drop-down itself has no styles applied.

Second version:

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

This one looks nice:

but it's a button. When an option is selected, I do not want to perform any action all I want is to change text and bind the selection with a corresponding input field.

Both of these approaches seams to be a wrong choice for my action. I refuse to believe that Bootstrap does not contain a simple drop-down single select component bound to an input field.

What am I missing ? Please help.

解决方案

If you want to achieve this just keep you dropdown button and style it like the select box. The code is here and below.

.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%;}

To make the button work like a select box, all you need to add is this tiny javascript code:

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

If you have multiple custom dropdowns like this you can use this javascript code:

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

这篇关于Bootstrap 3 下拉选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！