Как включить переключатель «Bootstrap» в раскрывающееся меню

Question

Я бы хотел, чтобы у меня была кнопка с двумя парами, а остальные доступны в выпадающем меню. Я могу получить взаимодействие, которое я хочу, назначив каждую возможность для класса, но я хотел бы, чтобы цвет выпадающего меню изменился на активный цвет кнопки, когда был выбран один из его вариантов, вместо цвета активной кнопки, оставшегося с любым Недавно была выбрана всегда видимая кнопка. Есть ли элегантный способ сделать это?

Вот скрипку с большей частью функциональности:
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

Немного Hacky, но, опираясь на ответ Алекс:

Я добавил метку ID, чтобы выбрать его : id = "xyz" затем в javascript удалите активный флаг для всех классов с my_data_flag и, наконец, добавьте его на ярлык назад.

$('.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/

Answer 2

может быть не так элегантно, но вот как я это сделал:

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