jquery - 选择选项中的颜色选择器

Question

我有一个颜色选择选项。

<select class="form-control">
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

但我想让它们变成颜色而不是文本。这可能吗？

我找到了 Bootstrap 颜色选择器。但我不希望你选择其他颜色。

Answer 1

1. 使用值或文本作为选项的背景。
2. 请注意，悬停的选项将变成蓝色，因为这是该选项的默认功能

$(".form-control option").each(function() {


  $(this).css("background-color", $(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
 <option ></option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>