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:
