在 Bootstrap-select 中交换文本和副文本

Question

我正在使用 bootstrap-select 来获得一个漂亮的按钮下拉菜单。该插件有一个选项，因此您可以 link 每个选项的潜台词。你可以看看这个片段，我在每个选项中插入了潜台词 'Size:'：

$('.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>

不幸的是，bootstrap-select 的实现使得潜台词始终显示在选项文本之后，但我希望反过来。所以它必须被交换成这样：

.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... &amp;lt;small class=&amp;quot;muted text-muted&amp;quot;&amp;gt;Size:&amp;lt;/small&amp;gt;"><span class="filter-option pull-left"><small class="muted text-muted">Size:</small>Choose... </span>&nbsp;<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=&quot;text&quot;>Choose...<small class=&quot;muted text-muted&quot;>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=&quot;text&quot;>36<small class=&quot;muted text-muted&quot;>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=&quot;text&quot;>37<small class=&quot;muted text-muted&quot;>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=&quot;text&quot;>38<small class=&quot;muted text-muted&quot;>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=&quot;text&quot;>39<small class=&quot;muted text-muted&quot;>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=&quot;text&quot;>40<small class=&quot;muted text-muted&quot;>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>

我没有在 api 中看到一个设置来获得这种行为，所以我必须自己操作 javascript 库或者我必须插入一些 css 代码来到达那里。有人知道解决方案吗？

Answer 1

为此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>

这个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;
}

见this updated fiddle

在 Bootstrap-select 中交换文本和副文本

Swap text and subtext in Bootstrap-select

jquery

twitter-bootstrap

bootstrap-select