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. Specifically the uncompressed jquery -

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

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>";
<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