引导选择 optgroup 映像答案

【问题标题】：Bootstrap select optgroup image引导选择 optgroup 映像
【发布时间】：2020-10-05 16:29:38
【问题描述】：

我在我的一个项目中使用 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>

【问题讨论】：

标签： bootstrap-4 bootstrap-select

【解决方案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>

它应该可以工作。

【讨论】：

不，我需要显示图像，因为我必须在那里插入标志图像。它也必须在optgroup 而不是option
在 optgroup 上尝试该属性。
不，我要的是图片而不是图标

【解决方案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/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>

必须测试它如何与更大的数据集一起工作。有没有人看到改进的方法？

【讨论】：