Twitter bootstrap 引导3下拉选择

我们正在尝试用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不包含绑定到输入字段的简单下拉单选择组件

---

我错过了什么？请提供帮助。

这样的下拉列表取决于您的浏览器，因为某些情况下不可能将其样式化。它看起来像你的是IE9，但在Chrome上会有很大的不同

您可以使用以下内容：

---

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

我们刚刚将我们的网站切换到bootstrap 3，我们有一大堆表单……这并不有趣，但一旦您掌握了窍门，情况就不算太糟了

这就是你要找的吗

单位
小的
中等的
大的

如果您想实现，只需保留下拉按钮并将其设置为选择框的样式即可。代码如下所示

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

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

$（'.dropdown menu a'）。在（'click'，function（）{
$（'.dropdown toggle'）.html（$（this.html（）+''）；
})

如果您有这样的自定义下拉列表，则可以使用以下javascript代码：

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

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

$（'.dropdown menu a'）。在（'click'，function（）{
$（this.parent（）.parent（）.prev（）.html（$（this.html（）+“”）；
})

您还可以将“活动”类添加到所选项目中

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

$（'.dropdown'）。在（'click'，'.dropdown menu li a'，function（）{
var target=$（this.html（）；
//将活动类添加到选定项
$（this）.parents（'.dropdown menu'）.find（'li'）.removeClass（'active'）；
$（this.parent（'li'）.addClass（'active'）；
//在下拉切换按钮上显示选定文本
$（this）.parents（'.dropdown'）.find（'.dropdown toggle'）.html（target+''）；
});

---

查看

我一直在寻找一个不错的选择下拉列表，现在我找到了一个不错的。所以我就把它留在这里。它被称为bootsrap select

链接。过来看。它有可编辑下拉列表、组合下拉列表等。这是一个轻松添加到您的项目

---

如果链接消失，只需搜索引导选择by silviomoreto.github.io。这更好，因为它是一个普通的选择标签

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

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

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

试试这个：

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

单位
小的
中等的
大的
；（函数（$）{
$.fn.bootselect=函数（选项）{
这个。每个（函数（）{
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=''+''+
vHtml+'+'+'
；
var i=0；
while（ili>a'）。on（'click'，function（）{
jQuery（parent.find（'button.btn'）.html（jQuery（this.html（）+“”）；
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（）；
我找到了一个更好的库
它将普通的
转换为bootsrap按钮下拉格式

对于像我这样的新手，请确保jscript位于html内容之下，否则它们可能无法工作
;(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();