带有 fontawesome 图标的 Html 下拉菜单

【问题标题】：Html dropdown with fontawesome icons带有 fontawesome 图标的 Html 下拉菜单
【发布时间】：2018-05-23 11:53:00
【问题描述】：

我有什么： 像这样的 html 下拉菜单：

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

我想要什么： 要填充字体的下拉菜单。（没有硬编码：<option value="fa fa-icon"></option>，因为我不想在下拉列表中硬编码 100 个不同的图标）。

我不知道是否有解决方案，所以任何帮助都会很棒:)

【问题讨论】：

标签： javascript php html font-awesome dropdown

【解决方案1】：

你想使用原版 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>

【讨论】：