语义UI下拉列表 - 将图像显示为图标？ [英] Semantic UI dropdown - display image as icon?

问题描述

在 https://jsfiddle.net/hodtfkys/3/ 中，我怎样才能获得它始终显示图像，如 http://jsfiddle.net/t9vfxo5t/ 所示，而不仅仅是用户下拉列表？

In https://jsfiddle.net/hodtfkys/3/ , how can I get it to always display the image as shown in http://jsfiddle.net/t9vfxo5t/ , not just when the user drops down the list?

图片仅在点击下拉列表时显示：

Image only when dropdown clicked:

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

图标始终显示：

<div class="ui selection dropdown">
    <input type="hidden" name="language">
    <i class="dropdown icon"></i>
    <div class="default text">Select language</div>
    <div class="menu">
        <div class="item" data-value="gb"><i class="gb flag"></i>English</div>
        <div class="item" data-value="es"><i class="es flag"></i>Spanish</div>
    </div>
</div>

推荐答案

嗨好像你正在使用 data-text ='男性'和 data-text ='女性'正在创建问题。删除它将解决问题，下面给出了更新的代码。

Hi its seems like you are using the data-text='Male' and data-text='Female' which is creating the issue.Removing it will solve the issue, updated code given below.

    <div class='ui icon selection dropdown'>
  <input name='DropDownListCategoryClone' type='hidden'>
  <i class='dropdown icon'></i>
  <div class='default text'> Select Gender</div>
  <div class='menu'>
    <div class='item' 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-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下拉列表 - 将图像显示为图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！