Question

我正在填写一个Html Select by Script。我的两个选择是Colorpickers。当您选择多个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>

Html选择 - ＆gt;选项，选择颜色作为值

1 个答案: