我想您可以在任何事件中自己调用“显示”方法。

http://jsfiddle.net/7Wv5h/40/ [更新]

JS：

// jQuery and Bootstrap loaded, you're here on a $(document).on('ready') scope !
$('#your-select').on('change', function (e) {
    // With $(this).val(), you can **(and have to!)** specify the target in your <option> values.
    $('#the-tab li a').eq($(this).val()).tab('show');
    // If you do not care about the sorting, you can work with $(this).index().
    // $('#the-tab li a').eq($(this).index()).tab('show');
});

HTML：

<form>
    <select id='mySelect'>
        <option value='0'>Home</option>
        <option value='1'>Profile</option>
        <option value='2'>Messages</option>
        <option value='3'>Settings</option>
    </select>
</form>
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Home content</div>
    <div class="tab-pane" id="profile">Profile content</div>
    <div class="tab-pane" id="messages">Messages content</div>
    <div class="tab-pane" id="settings">Settings content</div>
</div>

接受的答案将适用于一组选项卡。如果需要用不同的选择框触发多组选项卡，使用下面的js：

$('.select-nav').on('change', function(e) {
    var id = $(this).val();
    $('a[href="' + id + '"]').tab('show');
});

感谢这个 Flo-Schield-Bobby 的灵感！

这是您不需要保留链接的解决方案。只是选择。

$('#mySelect').on('change', function (e) {
  var $optionSelected = $("option:selected", this);
  $optionSelected.tab('show')
});



<select class="form-control" id="mySelect">
    <option data-target="#home">Home</option>
    <option data-target="#profile">Profile</option>
    <option data-target="#messages">Messages</option>
    <option data-target="#messages">Settings</option>
</select>        


<div class="tab-content">
  <div class="tab-pane active" id="home">
    Home
  </div>
  <div class="tab-pane" id="profile">.
    Profile
  </div>
  <div class="tab-pane" id="messages">
    Messages
  </div>
  <div class="tab-pane" id="settings">
    Settings
  </div>
</div>

我需要一个解决方案来处理页面上的多个选项卡，而没有其他解决方案适合我。所以我很快做了这个：https ://gist.github.com/kingsloi/7ab83b6781636df1fbf1

$(document).ready(function(){

//set the index counter
var i = 0;

//convert all .nav-tabs, except those with the class .keep-tabs
$('.nav-tabs:not(.keep-tabs').each(function(){

    //init variables
    var $select,
        c       = 0,
        $select = $('<select class="mobile-nav-tabs-' +i+ ' mobile-tab-headings "></select>');

    //add unique class to nav-tabs, so each select works independently
    $(this).addClass('nav-tabs-index-'+i);

    //loop though each <li>, building each into an <option>, getting the text from the a href
    $(this).children('li').each(function() {
        $select.append('<option value="'+c+'">' + $(this).text() + '</option>');
        c++;
    });

    //insert new <select> above <ul nav-tabs>
    $(this).before($select);

    //increase index counter
    i++
});

//on changing <select> element
$('[class^=mobile-nav-tabs]').on('change', function (e) {

    //get index from selected option
    classArray      = $(this).attr('class').split(" ");
    tabIndexArray   = classArray[0].split("mobile-nav-tabs-")
    tabIndex        = tabIndexArray[1];

    //using boostrap tabs, show the selected option tab
    $('.nav-tabs-index-'+tabIndex+' li a').eq($(this).val()).tab('show');
});

});

可以在这里查看 JS 小提琴：http: //jsfiddle.net/kingsloi/96ur6epu/

谢谢大家的回复。我发现 Nathan Hiemstra 提供的一个是最简单的，并且易于遵循和实施。

但是我注意到它以“一劳永逸”的方式工作。我的意思是，一旦您选择了一个选项并激活了其相应的面板并循环浏览了所有面板，您会注意到面板停止切换（至少在引导程序 4.6.* 中）。

经过一番挖掘，我发现 .tab('show') 方法向 select 的选项元素添加了一个“活动”类。有道理，因为我猜这将与一次活动 1 个的导航选项卡一起使用。

无论如何，我的简单修复（不知道它是否有任何副作用）但似乎工作是在选项元素调用.removeClass（'active'）上调用.tab（'show'）之后。我认为选定的选项无论如何都是“活动”选项，所以为什么要有这个类。但这已经使一个完成和永远工作之间产生了差异。

希望这个小小的修改有帮助

亲切的问候...