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

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


Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -