如何將圖標添加到語義UI下拉？

在https://jsfiddle.net/u40uz1c4/4/，我如何將這些圖標添加到下拉列表中？如何將圖標添加到語義UI下拉？

我有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;'>

來源

2017-02-23 user1946932

你不能做到這一點的ASP.NET控制器。你必須設置簡單的html標記，並使用腳本將其轉換爲下拉列表

來源

2017-02-23 07:17:44 Itiel

這可能是具有挑戰性的。目前，這些ASP.NET下拉菜單具有AutoPostback = True，並且還有服務器端aspx.vb代碼，可根據用戶的配置文件以編程方式在某些下拉菜單中添加或刪除某些下拉菜單項。有沒有人知道處理所有這些方法，仍然有語義下拉皮膚以及下拉菜單上的圖像圖標？ – user1946932

我不知道有什麼辦法做到這一點。如果對你很重要，你可以使用html標記，並創建JavaScript回發來處理事件。另外，使用剃刀... – Itiel

感謝您的意見。我最終做出了我給出的答案。 – user1946932

我最終開始了一個練習，以編程方式創建基於檢查現有asp：DropDownList控件的HTML服務器端控件，類似於輸出顯示在https://jsfiddle.net/hodtfkys/3/。

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

來源

2017-02-24 06:11:30 user1946932

如何將圖標添加到語義UI下拉？

回答

相關問題