Bootstrap выберите изображение optgroup

Question

Я использую Bootstrap -select (https://developer.snapappointments.com/bootstrap-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/popper.js@1.16.0/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/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/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

Итак, я сделал рабочий пример:

$('.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/popper.js@1.16.0/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/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/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>

Придется проверить, как это работает с большим набором данных. Кто-нибудь видит способ улучшить это?

Answer 2

Если вы пытаетесь отобразить эскиз рядом с меткой, попробуйте этот код

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

Он должен работать.