无法将 Bootstrap 图标放在选择框中不起作用

Question

当我使用<i class="glyphicon glyphicon-leaf"></i>它时效果很好。

但是如果我在 Html SelectBox 中尝试它就行不通了。

<select title="Select your spell" class="selectpicker" data-show-icon="true">
    <option><i class="glyphicon glyphicon-leaf"></i>select</option>
    <option data-icon="glyphicon glyphicon-eye-open"><i class="glyphicon glyphicon-leaf"></i>1</option>
    <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>">2</option>
</select>

Answer 1

您必须使用@Guruprasad 提到的 select2 jquery 库，或者您可以使用此https://developer.snapappointments.com/bootstrap-select/

它有几个选项用于在选择中显示图标或其他 HTML 标记。

<select id="mySelect" data-show-icon="true">
  <option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option>
  <option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option>
</select>

演示：https : //www.codeply.com/go/l6ClKGBmLS