Bootstrap选择optgroup图片

Question

我在使用Bootstrap-select (https:/developer.snapappointments.combootstrap-select。)在我的一个项目中。

我想在 optgroup label但似乎该库并没有内置这个功能。

我试过 <optgroup label="<img src='...'> Some text"> 但它逃脱了字符，显示为文本

<img src='...'> Some text

还使用 data-content 似乎不适用 optgroup 看起来就像被忽略了一样。

有没有什么方法可以让它工作？

用span元素举例。

.sample {
    color: #F00;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<select class="selectpicker">
  <optgroup label="<span class='sample'>a</span> Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping" data-content="<span class='sample'>a</span>">
    <option>Tent</option>
    <option>Flashlight</option>
    <option data-content="<span class='sample'>a</span>">Toilet Paper</option>
  </optgroup>
</select>

Answer 1

如果你想在标签旁边显示一个缩略图，可以试试这个代码。

<select title="Select your spell" class="selectpicker">
  <option>Select...</option>
  <option data-icon="glyphicon glyphicon-eye-open" data-subtext="petrification">Eye of Medusa</option>
  <option data-icon="glyphicon glyphicon-fire" data-subtext="area damage">Rain of Fire</option>
</select>

应该是可以的。

Answer 2

所以我做了一个工作的例子。

$('.selectpicker').on('shown.bs.select', function() {
	$('.bootstrap-select .dropdown-header').each(function() {
    	if ((this.dataset.unescaped || '1') == '1') {
            let el = $(this);
            el.html(el.text());
            el.attr('data-unescaped', '0'); // so html isn't lost if opened 2nd time
        }
    })
})

.sample {
    color: #F00;
}

.bootstrap-select img {
    width: 16px;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<select class="selectpicker">
  <optgroup label="<img src='https://openmoji.org/data/color/svg/1F1EA-1F1FA.svg'> Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

将不得不测试它是如何工作 与更大的数据集。 有没有人看到一个方法来改进这个？