仅限语义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我也希望每个列表在点击后下降，它们仍然可以放在纵向屏幕内，所以如果列表击中屏幕的右边缘，下拉列表的左边距将需要为负。）< / p>

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

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

即：

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

见这里：https://stackoverflow.com/a/15504877/1383168

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