Выпадающий список семантического пользовательского интерфейса - отображать изображение в виде значка?
В https://jsfiddle.net/hodtfkys/3/ как я могу заставить его всегда отображать изображение, как показано в http://jsfiddle.net/t9vfxo5t/, а не только когда пользователь выпадает из списка?
Изображение только при нажатии раскрывающегося списка:
<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>
1 ответ
Решение
Привет, кажется, вы используете data-text='Male'
а также data-text='Female'
Это создает проблему. Обновленный код приведен ниже.
<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>