是否可以为 html 选择器中的每一行着色？

Question

我有一个 html 选择器，用户可以通过它选择颜色。

<select name="color" class="form-control">
  <option value="ff0000">Red</option>
  <option value="ff7f00">Orange</option>
  <option value="ffff00">Yellow</option>
  <option value="7fff00">Chartreuse</option>
  <option value="00ff00">Green</option>
  <option value="00ff7f">Spring Green</option>
  <option value="00ffff">Cyan</option>
  <option value="007fff">Azure</option>
  <option value="0000ff">Blue</option>
  <option value="7f00ff">Violet</option>
  <option value="ff00ff">Magenta</option>
  <option value="ff007f">Rose</option>
</select>

我想用它所代表的颜色为选择器中的每个选项着色，以便用户可以看到他们正在选择的颜色。有没有办法做到这一点？

编辑：有人指出，我不清楚我是否希望（理想情况下）在高光上表示这种颜色，这样您就会看到看起来像油漆样本的东西。如果这是不可能的，那么我想至少在选择颜色时将选择器的背景颜色更改为所选颜色的背景颜色。

Answer 1

参考这个fiddle

这是实现预期结果的代码

使用下面代码的好处是你只需要在optionColors数组中添加你想要的颜色，用逗号分隔，它会作为一个选项添加

我还发现here在MAC OS中不会设置背景色选项！！！

HTML

<select name="color" class="form-control" id="Select">
</select>

Javascript

   $(document).ready(function(){
optionColors=["red","blue","green","yellow","black"];
    $.each(optionColors,function(i,data){
        $("#Select").append("<option style='background-color:"+optionColors[i]+"'>"+optionColors[i]+"</option>");

    });
    $("#Select").prepend('<option selected="selected" style="background-color:white">Select a color</option>');
});

Answer 2

这可以使用 Jquery 来完成，您不需要为颜色编写硬编码 css，它会采用您给出的任何值。

try this

$(document).ready(function(){
    $('.form-control option').each(function(){
        $(this).css('color','#'+$(this).val());
    });
});

Answer 3

事实证明，在 OSX 中无法设置此元素的样式。 : (

Answer 4

试试这个

<select name="select">
  <option value="1" style="background-color: blue">Test</option>
  <option value="2" style="background-color: green">Test</option>
</select>

DEMO

Answer 5

使用类选择器作为选项。

CSS

.optionRed{
  background : red;
}
.optionOrange{
  background :orange;
}
.optionYellow{
  background : yellow;

}

HTML

<select name="color">
<option value="ff0000" class="optionRed">Red</option>
<option value="ff7f00" class="optionOrange">Orange</option>
<option value="ffff00" class="optionYellow">Yellow</option>
<option value="7fff00">Chartreuse</option>
<option value="00ff00">Green</option>
<option value="00ff7f">Spring Green</option>
<option value="00ffff">Cyan</option>
<option value="007fff">Azure</option>
<option value="0000ff">Blue</option>
<option value="7f00ff">Violet</option>
<option value="ff00ff">Magenta</option>
<option value="ff007f">Rose</option>
</select>

查看代码

http://jsfiddle.net/VF26G/1/

Answer 6

试试这个：

<select name="color">
  <option value="ff0000" style="background-color:ff0000" >Red</option>
  <option value="ff7f00" style="background-color:ff7f00">Orange</option>
  <option value="ffff00" style="background-color:ffff00">Yellow</option>
  <option value="7fff00" style="background-color:7fff00">Chartreuse</option>
  <option value="00ff00" style="background-color:00ff00">Green</option>
  <option value="00ff7f" style="background-color:00ff7f">Spring Green</option>
  <option value="00ffff" style="background-color:00ffff">Cyan</option>
  <option value="007fff" style="background-color:007fff">Azure</option>
  <option value="0000ff" style="background-color:0000ff">Blue</option>
  <option value="7f00ff" style="background-color:7f00ff">Violet</option>
  <option value="ff00ff" style="background-color:ff00ff">Magenta</option>
  <option value="ff007f" style="background-color:ff007f">Rose</option>
</select>

Answer 7

因此，如果不完全替换 select，就不可能在悬停时更改 select 的 option 的背景颜色。

这是从 HTML 中删除键和值并使用选项列表填充其他内容的简单示例：

http://jsfiddle.net/yftW6/1/

var colorList = {};
var colorKeys = [];

$('.form-control option').each(function(index) {
    colorList[$(this).val()] = $(this).text();
});

for (var key in colorList) {
    $('.color-replacer').append('<span class="color-' + key + '">' + colorList[key] + '</span>');
}

$('.color-replacer span').click(function() {
    $('.form-control').val($(this).prop('class').replace('color-', ''));
});

单击替换选项后，它会返回并更新原始select。您可以使用 jQuery 隐藏选择，这样没人会看到它（$('.form-control').hide(); 在顶部。）