带下拉菜单的HTML下拉菜单

Question

What i have: An html dropdown like this:

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

What i want: The dropdown to be filled with fontawesome icons. (not hardcoded like: <option value="fa fa-icon"></option> because I don't want to hardcode like 100 different icons in my dropdown).

I don't know if there is a solution for this so any help would be great :)

Answer 1

Do you want to use vanilla JS? You can try this example, but how it will work depends on how you want to use it. And anyway you will need to hardcode the icons in the array.

If you have questions describe please where you want to place this code.

 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

I guess you could do that?

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

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