帶下拉菜單的HTML下拉菜單

Question

我所擁有的：像這樣的html下拉列表：

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

我想要的是：下拉菜單中會填滿字體很棒的圖標。 （而不是像<option value="fa fa-icon"></option>這樣的硬編碼，因為我不想在下拉菜單中對100個不同的圖標進行硬編碼）。

我不知道是否有解決方案，所以任何幫助都會很棒的:)

Answer 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> 

Answer 2

我想你能做到嗎？

("" is just an example of a fontawesome icon).

<select name="faDropdown" class="form-control fa">
<option value="1">&#xf0c1;</option>
</select>