Question

我正在使用bootstrap-select来看一个漂亮的按钮下拉菜单。该插件有一个选项，以便您可以将子文本链接到每个选项。您可以看一下这个片段，我在其中插入了子文字＆＃39;尺寸：＆＃39;每个选项：

＆＃13;

$('.selectpicker').selectpicker();

＆＃13;

.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;  
}

＆＃13;

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

＆＃13;

不幸的是，实现了bootstrap-select，使得子文本总是显示在选项文本之后，但我想反过来使用它。所以它必须交换成这样：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我没有在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中交换文本和子文本

1 个答案: