HTML elements inside an Option element?

So Im looking to do a standard drop down but I need to generate squares of dynamic color "icons" to the left of the text. Ive been googling and have only found this one link but I dont want to add a 3rd party plugin with lots of overkill to the mvc website. Elements are invalid in the Option tag but this one link has done it with jquery.

https://designwithpc.com/Plugins/ddSlick Specifically the uncompressed jquery - https://github.com/prashantchaudhary...ery.ddslick.js

Like the example link but without images, just a div perhaps drawn as a colored square image.

So I use this in js in one of my grids which works well but now I need it in a dropdown. fValue is the html color code formatted like "#ff0000;" which will be populated from @item.Value. The js will need to generate the option element.

Thanks for any insights

Code:

---

template = "<div style='vertical-align: middle; margin-right: 5px; display: inline-block; width: 20px; height: 20px; border-width: 1px; border-style: solid; border-color: black; background-color: " + fValue + "'></div><span style='vertical-align: middle;'>" + fValue + "</span>";

---

Code:

---

<select data-bind="value:Type" title="" data-role="dropdownlist" style="display: none; width: auto;" data-value-field="value" data-text-field="text" data-color-field="color">
    <option value="" selected="selected">None</option>
    @{
        foreach (var item in Model.EventTypes.ListItems)
      {
          <option value="@item.ListItemID" selected=""> @item.ItemName</option> // NEED THIS CONVERTED TO ADD template
      }
    }
</select>

---