0

各オプションに 3 色のドロップダウンを作成しようとしているので、ユーザーは好みの配色を選択できます。

これには、次のコードで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>

ただし、フローティングのため、うまく機能しません。それを修正する方法はありますか、それとも必要なものを達成するためのより良い方法はありますか?

4

1 に答える 1

0

テンプレートオプションを使用して、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;
}
于 2014-05-08T10:18:00.113 に答える