html - 带有配色方案的下拉菜单作为选项

Question

我正在尝试在每个选项中创建一个包含三种颜色的下拉菜单，以便用户可以选择他喜欢的配色方案。

我试图为此使用 Bootstrap Select ( http://silviomoreto.github.io/bootstrap-select/ )，代码如下：

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

但是，由于浮动，这并不能很好地工作。有没有办法解决这个问题，还是有更好的方法来实现我需要的？

Answer 1

我最终使用了 Select2，带有模板选项：

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