另一种不使用.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>

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

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

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

测试: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%;}

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

另一种选择是使用引导选择。用他们自己的话来说:

一个使用按钮下拉的自定义选择/多选引导，设计成像常规引导选择一样。

另一种不使用.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>