Step 1) Create Select List of tags
<select class="selectpicker show-tick" multiple data-max-options="2" data-show-subtext="true" data-live-search="true" data-actions-box="true"> <option data-subtext="sub title"> Tag 1</option> <option data-subtext="sub title"> Tag 2</option> <option data-subtext="sub title"> Tag 3</option> </select>
Step 2) Add Bootstrap and Bootstrap-select CSS and JS
... header part ... <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> .... Body part ... ... footer part .... <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
Step 3) Run the code in the browser.
Another Example (with label-success)
<select id='selLevel' class='selectpicker' name='levels' multiple> <option title='Levels' value='No Preference' selected='selected'> No Preference </option> <option title='<span class="label label-success">Department 1</span>' value=1 > Department 1 </option> <option title='<span class="label label-success">Department 2</span>' value=2 > Department 2</option> <option title='<span class="label label-success">Department 3</span>' value=3 > Department 3 </option> </select>
Complete Code:
<html> <head> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> </head> <body> <h1>Create tag control to select multiple tags using bootstrap and boostrap-select</h1><br/> <select class="selectpicker show-tick" multiple data-max-options="2" data-show-subtext="true" data-live-search="true" data-actions-box="true"> <option data-subtext="sub title"> Tag 1</option> <option data-subtext="sub title"> Tag 2</option> <option data-subtext="sub title"> Tag 3</option> </select> <select id='selLevel' class='selectpicker' name='levels' multiple> <option title='Levels' value='No Preference' selected='selected'> No Preference </option> <option title='<span class="label label-success">Department 1</span>' value=1 > Department 1 </option> <option title='<span class="label label-success">Department 2</span>' value=2 > Department 2</option> <option title='<span class="label label-success">Department 3</span>' value=3 > Department 3 </option> </select> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script> <script> $('.selectpicker').selectpicker(); </script> </body> </html>
Another Output: