如何将图标添加到语义 ui 下拉列表？

Question

在 https://jsfiddle.net/u40uz1c4/4/ 上，如何将这些图标添加到下拉列表中？

我有 ASP.NET 个下拉菜单，每个下拉菜单都有一个项目列表，我想使用语义下拉菜单为其添加外观。但是我想要 svg 图像作为每个项目的图标。

参考：http://semantic-ui.com/modules/dropdown.html#/usage

<select name="gender" class="ui dropdown" id="select">
  <option value="">Gender</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>
<br />
<br />

<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'>

<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'>

Answer 1

你不能通过 ASP.NET 控制器来做到这一点。您必须创建简单的 html 标记，然后使用脚本将其转换为下拉列表

Answer 2

我最终开始了一项练习，根据检查现有 asp:DropDownList 控件以编程方式创建 HTML 服务器端，类似于 https://jsfiddle.net/hodtfkys/3/.[=12= 中显示的输出]

<div class='ui icon selection dropdown'>
  <input name='DropDownListCategoryClone' type='hidden'> <i class='dropdown icon'></i>
  <div class='default text'>
    Male
  </div>
  <div class='menu'>
    <div class='item' data-text='Male' data-value='male'>
      <img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'> Male
    </div>
    <div class='item' data-text='Female' data-value='female'>
      <img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'> Female
    </div>
  </div>
</div>

如何将图标添加到语义 ui 下拉列表？

How to add icon to semantic ui dropdown?

css

c#

vb.net

asp.net

semantic-ui