如何使 Bootstrap 单选按钮继续进入下拉菜单

Question

我想要一个显示几个选项的单选按钮，其余选项在下拉菜单中可用。我可以通过将每个选项分配给 class 来获得我想要的交互，但我希望下拉菜单的颜色在选择其中一个选项时更改为活动按钮颜色，而不是活动按钮最近选择的任何始终可见的按钮的颜色。有没有一种优雅的方法可以做到这一点？

这是一个具有大部分功能的 fiddle：
https://jsfiddle.net/nqamazgz/

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-success my_data_flag active" id="one">
        <input name="options" type="radio" checked> ONE </input>
    </label>
    <label class="btn btn-success my_data_flag" id="two">
        <input name="options" type="radio"> TWO </input>
    </label>

    <div class="btn-group">
        <label class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            <span id="text"> More Options </span><span class="caret"></span>
        </label>
        <ul class="dropdown-menu" id="divNewNotifications">
            <li><a class="my_data_flag" id="three"> THREE </a></li>
            <li><a class="my_data_flag" id="four"> FOUR </a></li>
        </ul>
    </div>
</div>


<!-- The following updates the text of the dropdown,
     only works if this code is after the above html -->
<script>
    $('.dropdown-toggle').dropdown();
    $('#divNewNotifications li > a').click(function(){
    if (this.text !== ' More Options ')
        $('#text').text($(this).html());
    });
</script>

任何提示将不胜感激，谢谢。

Answer 1

可能不是那么优雅，但我是这样做的：

https://jsfiddle.net/nqamazgz/1/

$('.dropdown-toggle').dropdown();
  $('#divNewNotifications li > a').click(function(){
    if (this.text !== ' More Options ') {
      $('#text').text($(this).html());
    }
    $('#divNewNotifications li').css('background-color', 'white');
    $(this).closest('li').css('background-color', 'green');
});

Answer 2

有点老套，但基于 Alex 的回答：

我向 select 添加了一个标签 ID：id="xyz" 然后在 javascript 中，删除所有具有 my_data_flag 的 class 的活动标志，最后将其添加到标签背面。

$('.dropdown-toggle').dropdown();
    $('#divNewNotifications li > a').click(function(){
    if (this.text !== ' More Options ') {
        $('#text').text($(this).html());
        $('.my_data_flag').removeClass('active');
        $('#xyz').addClass('active');
    }
    });

https://jsfiddle.net/nqamazgz/5/

如何使 Bootstrap 单选按钮继续进入下拉菜单

How to make a Bootstrap radio button continue into a dropdown menu

html

radio-button

twitter-bootstrap

drop-down-menu