How to enable Bootstrap radio button in dropdown menu
I would like to have a radio button with a couple of options and the rest is available in the dropdown menu. I can get the interaction I want by assigning each capability to the class, but I would like the dropdown menu color to change to the active button color when one of its options was selected, instead of the active button color remaining with any Recently always selected visible button. Is there an elegant way to do this?
Here is a fiddle with most of the functionality:
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>
Any advice would be appreciated, thanks.
source to share
A bit hacky, but based on Alex's answer:
I added the tag id to select it: id = "xyz" then in javascript remove the active flag for all classes with my_data_flag and finally add it to the shortcut back.
$('.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');
}
});
source to share
may not be so elegant, but this is how I did it:
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');
});
source to share