Html選択 - >オプション、値として選択した色

Question

私はHtmlスクリプトで選択します。私のセレクションの2つはカラーピッカーです。 NumberSelectionの番号を選択すると、選択した番号が選択の上部に表示されます。

これはどのように色で動作しますか？私は知っている、あなたはそこに色を塗ることはできません。しかし、選択した色を表示する方法はありますか？

"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

あなたがあるSimpy行うことによって選択の上部で選択された要素を色付けすることができます

このお探し

$('#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>