Bootstrap Demo
Bootstrap Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/bootstrap-multiselect/bootstrap-multiselect.css" type="text/css"> <script type="text/javascript" src="js/bootstrap-multiselect/bootstrap-multiselect.js"></script> </head> <body> <div class="container"> <div class="example"> <script type="text/javascript"> $(document).ready(function() { $('#option-droup-demo').multiselect({ enableClickableOptGroups: true }); }); </script> <select id="option-droup-demo" multiple="multiple"> <optgroup label="Web Development"> <option value="jQuery">jQuery</option> <option value="Bootstrap">Bootstrap</option> <option value="HTML" selected="selected">HTML</option> <option value="CSS" selected="selected">CSS</option> <option value="Angular">Angular</option> </optgroup> <optgroup label="Programming Languages"> <option value="Java">Java</option> <option value="csharp">C#</option> <option value="Python">Python</option> </optgroup> <optgroup label="Databases"> <option value="MySQL">MySQL</option> <option value="Oracle">Oracle</option> <option value="MSSQL">MS SQL Server</option> </optgroup> </select> </div> </div> </div> </body> </html>
Selectable option group
jQuery
Bootstrap
HTML
CSS
Angular
Java
C#
Python
MySQL
Oracle
MS SQL Server