Been using Bootstrap Selectpicker but when I add data-content to data-subtext to highlight the selection in a colour, the subtext disappears. Tried it various ways but the subtext still disappears from the dropdown list. Any ideas or maybe a workaround?
Forgive the lack of code, I have everything running locally as my slow broadband struggles with with CDN's.
<select class="selectpicker" data-style="btn-light" data-width="100%" multiple data-max-options="2">
<option data-content="<span class='label label-success'>Choice1</span>" data-subtext="Subtext1">Choice1</option>
<option data-content="<span class='label label-info'>Choice2</span>" data-subtext="Subtext2">Choice2</option>
<option data-content="<span class='label label-warning'>Choice3</span>" data-subtext="Subtext3">Choice3</option>
</select>Here's one approach/workaround to do that:
$('select.selectpicker').selectpicker();.bootstrap-select .filter-option .text-muted {
display: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-style="btn-light" data-width="100%" multiple data-max-options="2">
<option data-content="<span class='label label-success'>Choice1 </span> <small class='text-muted'>Subtext1</small>">Choice1</option>
<option data-content="<span class='label label-info'>Choice2 </span><small class='text-muted'>Subtext2</small>">Choice2</option>
<option data-content="<span class='label label-warning'>Choice3 </span><small class='text-muted'>Subtext3</small>">Choice3</option>
</select>Removed of the data-subtext attribute and added the same HTML to the data-content (it was just a matter of CSS class text-muted to be added, for example:
<option data-content="<span class='label label-success'>Choice1 </span> <small class='text-muted'>Subtext1</small>">Choice1</option>
Added the CSS in order to hide the subtext from the selected options. Try removing that and you'll notice the difference.
Hope this helps.
EDIT
To make multiple selectpickers work based on cloning the elements, instead of adding classes carerClass and carerCopy, add them as IDs or data- attributes and clone them based on that. The issue with adding classes is that selectpicker initialization picks up those classes and adds it to the generated bootstrap HTML code which keeps the cloning in a loop and messes up the selection. For more details, check the DOM for the cloned elements in your non-working fiddle.
Change the classes that you add to either an ID or a data-attribute.
First clone the select element, then initiate the selectpicker.
Here's a fork of your fiddle: