Html выпадающий с потрясающими иконками - PullRequest
Новая
       10

Html выпадающий с потрясающими иконками

0 голосов
/ 23 мая 2018

Что у меня есть: Раскрывающийся html-код:

<select name="faDropdown" class="form-control"> <option value="1">Select an icon</option> </select>

Что я хочу: Раскрывающийся список будет заполненпотрясающие иконки.(не жестко, как: <option value="fa fa-icon"></option>, потому что я не хочу жестко кодировать, как 100 различных иконок в моем раскрывающемся списке).

Я не знаю, есть ли решение для этого, поэтому любая помощь будет отличной:)

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Полагаю, вы могли бы сделать это? 

("&#xf0c1;" is just an example of a fontawesome icon).

<select name="faDropdown" class="form-control fa">
<option value="1">&#xf0c1;</option>
</select>
0 голосов
/ 23 мая 2018

Хотите использовать Vanilla JS?Вы можете попробовать этот пример, но то, как он будет работать, зависит от того, как вы хотите его использовать.И в любом случае вам нужно будет жестко закодировать значки в массиве.

Если у вас есть вопросы, опишите, где вы хотите разместить этот код. 

var select = document.getElementsByClassName('form-control')[0];
var icons = ['fa-icon', 'fa-icon2', 'fa-icon3'];

for (var i = 0; i < icons.length; i++){
    var opt = document.createElement('option');
    opt.value = `fa ${icons[i]}`;
    opt.innerHTML = opt.value;
    select.appendChild(opt);
}
<select name="faDropdown" class="form-control">
  <option value="1">Select an icon</option>
</select>
...