Html Select -> Option, 选择颜色作为值

Question

我正在按脚本填充 Html Select。我的两个选择是拾色器。当你选择一个 NumberSelection 的数字时，你可以在 Select 的顶部看到被选中的数字。

这如何与颜色一起使用？我知道，你不能在那里填充颜色。但是有没有办法显示所选颜色？

我想写一个“A”并给它上色。

所以我的代码看起来是这样的：

function FillFontColorMenu() {
  FillSelection(GetPossibleColors(), "fontColorMenu"); // Fill the selection with Colors
}

function FillBackgroundColorMenu() {
  FillSelection(GetPossibleColors(), "backgroundColorMenu");
}

function FillSelection(possibleValues, elementId){ // Start filling

        var optionElement; // One option element

        for(var j = 0; j < possibleValues.length; j++) // Create the option elements
        {
          optionElement = "<option id="+"selectionColor"+[j]+elementId+" value='" + possibleValues[j] + "'>"+ "A" +"</option>";  // Create the element string + ! Colorize the "A"-value ! 

          $('#'+elementId).append(optionElement);       // Create                   

          $('#selectionColor'+[j]+elementId).css("background-color", possibleValues[j]); // Give it a Color
        }
}}

function GetPossibleColors() { // Get all possible Colors for the selection
  var possibleColors = [];

possibleColors.push("#" + "123456".toString(16)); // TEST
possibleColors.push("#" + "789963".toString(16));
possibleColors.push("#" + "147852".toString(16));

  return possibleColors;
}

我只需要对元素字符串的“A”进行着色。有什么想法吗？

您可以在此处查看示例：https://ibin.co/3CSP15pLpLmj.png

Answer 1

您可以通过简单的操作为选择顶部的选定元素着色：

$('#fontColorMenu option').each(function(index,item){
    $(item).css('background-color',$(this).val());//Colorize the items
})
$('#fontColorMenu').select().change(function(){
  $(this).css('background-color',$(this).val());//Colorize the box
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="fontColorMenu">
  <option value="0">Select...</option>
  <option value="#FF0000">#FF0000</option>
  <option value="#00FF00">#00FF00</option>
  <option value="#0000FF">#0000FF</option>
</select>