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标记。

tradeleg_set__quantity__ne

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

Answer 2

标准下拉列表帮助器不支持此功能，您可以编写自己的自定义帮助器或使用如下所示的简单HTML。

<style>
select#dropdown option[value="1"]   { background-image: '';   }
select#dropdown option[value="2"]   { background-image: '';   }
select#dropdown option[value="3"]   { background-image: '';   }
</style> 

<select id="dropdown">

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

此链接将有助于编写您自己的自定义帮助程序

https://forums.asp.net/t/2130842.aspx?How+to+create+a+Dropdown+menu+with+image+icons+using+razor+

无法将Bootstrap图标不能在选择框中使用

2 个答案: