I am using bootstrap-select to have a nicely looking button dropdown menu. The plugin has an option so that you can link a subtext to each option. You can take a look at this snippet, where I inserted the subtext 'Size:' to each option:
$('.selectpicker').selectpicker();.bootstrap-select .dropdown-menu>li>a small.muted {
display: none;
}
.bootstrap-select .dropdown-toggle .filter-option small {
font-size: 14px;
margin-right: 5px;
color: #494949;
font-weight: 700;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<select class="selectpicker show-tick" data-show-subtext="true">
<option data-subtext="Size:" data-hidden="true">Choose...</option>
<option data-subtext="Size:">36</option>
<option data-subtext="Size:">37</option>
<option data-subtext="Size:">38</option>
<option data-subtext="Size:">39</option>
<option data-subtext="Size:">40</option>
</select>Unfortunately bootstrap-select is implemented such that the subtext is always displayed after the option text but I want to have it the other way around. So it must be swapped to look like this:
.bootstrap-select .dropdown-menu>li>a small.muted {
display: none;
}
.bootstrap-select .dropdown-toggle .filter-option small {
font-size: 14px;
margin-right: 5px;
color: #494949;
font-weight: 700;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group bootstrap-select show-tick">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" title="Choose... &lt;small class=&quot;muted text-muted&quot;&gt;Size:&lt;/small&gt;"><span class="filter-option pull-left"><small class="muted text-muted">Size:</small>Choose... </span> <span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner selectpicker" role="menu">
<li class="hide is-hidden selected" data-original-index="0"><a tabindex="0" class="" data-normalized-text="<span class="text">Choose...<small class="muted text-muted">Size:</small></span>"><span class="text">Choose...<small class="muted text-muted">Size:</small></span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
<li data-original-index="1"><a tabindex="0" class="" data-normalized-text="<span class="text">36<small class="muted text-muted">Size:</small></span>"><span class="text">36<small class="muted text-muted">Size:</small></span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
<li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class="text">37<small class="muted text-muted">Size:</small></span>"><span class="text">37<small class="muted text-muted">Size:</small></span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
<li data-original-index="3"><a tabindex="0" class="" data-normalized-text="<span class="text">38<small class="muted text-muted">Size:</small></span>"><span class="text">38<small class="muted text-muted">Size:</small></span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
<li data-original-index="4"><a tabindex="0" class="" data-normalized-text="<span class="text">39<small class="muted text-muted">Size:</small></span>"><span class="text">39<small class="muted text-muted">Size:</small></span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
<li data-original-index="5"><a tabindex="0" class="" data-normalized-text="<span class="text">40<small class="muted text-muted">Size:</small></span>"><span class="text">40<small class="muted text-muted">Size:</small></span><span class="glyphicon glyphicon-ok check-mark"></span></a>
</li>
</ul>
</div>
</div>I don't see a setting within the api to obtain this behavior, so I have to manipulate the javascript library itself or I have to insert some css code to get there. Does anyone know a solution?
For this HTML:
<select class="selectpicker show-tick">
<option data-hidden="true">Choose...</option>
<option >36</option>
<option>37</option>
<option >38</option>
<option>39</option>
<option>40</option>
</select>
This CSS
.bootstrap-select .dropdown-menu>li>a small.muted {
display: none;
}
.bootstrap-select .dropdown-toggle .filter-option {
position:relative;
padding-left:38px;
}
.bootstrap-select .dropdown-toggle .filter-option:before{
content:"Size:";
font-size: 14px;
font-weight:700;
position:absolute;
left:0;
top:0;
}