html - How to make a Bootstrap radio button continue into a dropdown menu -
i have radio button couple options showing, , rest available in dropdown menu. can interactions want assigning every option class, color of dropdown menu change active button color when 1 of choices has been selected, instead of active button color remaining whatever visible button selected. there elegant way this?
here fiddle of 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> 1 </input> </label> <label class="btn btn-success my_data_flag" id="two"> <input name="options" type="radio"> 2 </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"> 3 </a></li> <li><a class="my_data_flag" id="four"> 4 </a></li> </ul> </div> </div> <!-- following updates text of dropdown, works if code after above html --> <script> $('.dropdown-toggle').dropdown(); $('#divnewnotifications li > a').click(function(){ if (this.text !== ' more options ') $('#text').text($(this).html()); }); </script> any tips appreciated, thanks.
a bit hacky but, building on alex's answer:
i added label id select : id="xyz" in javascript, remove active flag class have my_data_flag , added on label 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'); } });
Comments
Post a Comment