Html选择显示具有空颜色div和显示值的选项

Question

我需要HTML select选项显示一个带有空颜色div和显示值的值。

我们如何使用HTML，JavaScript或jQuery做到这一点？

我附上了一个png值，我需要它是这样的。

<select>

<option value="volvo"><div style="width:10px;height:10px;background-color:red"></div>V</option>

<option value="saab">Saab</option>

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</select>

这就是我需要的：

Answer 1

您可以尝试使用select2库。 https://select2.github.io/examples.html

Answer 2

不，你不能因为<option>标签不能包含任何其他标签。因此，无法在<option>标记内添加任何div或span。

但你可以尝试https://semantic-ui.com/modules/dropdown.html

Answer 3

您可以随时为整个选项着色，如下所示：

<select >
<option style="background-color: lightblue;" value="Saab">Saab</option>
<option style="background-color: lightgreen;" value="Mercedes">Mercedes</option>
<option style="background-color: red;" value="Audi">Audi</option>
</select>

否则我不太确定你能做到你想做的事。