仅语义 UI 下拉图标？

Question

基于http://jsfiddle.net/t9vfxo5t/，我想要一个如图所示的语义 UI 下拉列表，但最终结果我只想显示为旗帜，而不是旗帜和国家名称文本。我仍然希望国家名称在单击时出现在下拉列表中。

我尝试删除 http://jsfiddle.net/Lhzua273/1/ 中的文本，但随后它也将其从下拉列表中删除。

<div class="ui fluid search selection dropdown">
    <input type="hidden" name="language">
    <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></div>
    </div>

谁能建议如何实现？

（最终我可以在 div 行中水平并排放置 4 个图标下拉菜单，如图所示，以便它们以纵向模式适合手机。这样用户可以选择首选国家/地区 1、2、3 和 4 .我也希望当每个列表在点击后下拉时，它们仍然可以放在纵向屏幕内，所以如果列表碰到屏幕的右边缘，下拉列表的左边距需要变为负数。）

Answer 1

你想要这样的东西吗？

    <div class="ui compact selection dropdown">
    <i class="dropdown icon"></i>
            <div class="text">FLAG</div>
            <div class="menu">
                    <div class="item"><i class="es flag"></i></div>
                    <div class="item"><i class="jp flag"></i></div>
                    <div class="item"><i class="ru flag"></i></div>
                    <div class="item"><i class="cn flag"></i></div>
            </div>
    </div>

https://jsfiddle.net/busLpjag/

这是糟糕的用户体验，最好使用带有国家选择列表的模式。

下拉列表中的 5 个（或更多）标志 = 下拉列表中的滚动条 :(

Answer 2

您需要在每个.menu .item 元素中添加data-text。

即：

<div class="item" data-text="Spanish" data-value="es">
  <i class="es flag"></i>
</div>

请看这里：http://jsfiddle.net/9t5qapog/2/

我还在 JSFiddle 上每个选项的 data-text 中包含了标志图标。这不是强制性的。