javascript - 带有 fontawesome 图标的 Html 下拉菜单
问题描述
我有什么: 像这样的 html 下拉列表:
<select name="faDropdown" class="form-control">
<option value="1">Select an icon</option>
</select>
我想要
的是:下拉列表中充满了令人敬畏的图标。(不像硬编码:<option value="fa fa-icon"></option>
因为我不想在我的下拉列表中硬编码 100 个不同的图标)。
我不知道是否有解决方案,所以任何帮助都会很棒:)
解决方案
你想使用香草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>
推荐阅读
- libgdx - LibGDX 像素图方法不存在
- javascript - 如何将数组的内容显示为列表?
- javascript - 如何从 Redux 的数组中只删除一个元素?目前不为我工作
- node.js - GSI 与 DynamoDB.DocumentElement 和 Node.JS
- javascript - 如何使用模块和 Node.js 从 html 中获取 js 函数?
- apache-kafka - 在 KSQLDB 中插入具有嵌套结构的数组
- typescript - 广度优先搜索实现陷入无限循环
- android-recyclerview - recyclerview item onClick 设置ImagemView容器中点击的图片
- java - 在 recyclerview 上检测到 IndexOutOfBoundException 不一致
- button - 为 CMFCButton 屏蔽 MFC 图像资源