Dropdown with color schemes as options

Question

I'm trying to create a dropdown with three colors in each option, so the user can select his preferred color scheme.

I was trying to use Bootstrap Select (http://silviomoreto.github.io/bootstrap-select/) for this, with the following code:

<select class="selectpicker" name="color_scheme" id="color_scheme">
      <option value="1" data-content="<div style='height:15px;width:15px;background:red;float:left'></div><div style='height:15px;width:15px;background:green;float:left'></div><div style='height:15px;width:15px;background:blue;float:left;clear:right'></div>"></option>
      <option value="2" data-content="<div style='height:15px;width:15px;background:gray;float:left'></div><div style='height:15px;width:15px;background:orange;float:left'></div><div style='height:15px;width:15px;background:yellow;float:left'></div>"></option>
</select>

That doesn't work that well though, because of the floating. Is there a way to fix that, or is there a better way to achieve what I need?

Answer 1

I ended up using Select2, with the templating option:

<select>
    <option value="0" data-foo="bar">option one</option>
    ...
</select>

function format(state) {
    var originalOption = state.element;

    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + $(originalOption).data('foo') + "' />" + state.text;
}