Html Select -> Option, Selected color as value

Question

Я заполняю Html Select by Script. Два из моих выборов - Colorpickers. Когда u выбирает номер NumberSelection, вы можете увидеть выбранный номер в верхней части Select.

Как можно работать с цветами? Я знаю, вы не можете заполнить там цвета. Но есть ли способ показать выбранный цвет?

Я думал о написании в «А» и раскрашивал его.

Так что мой код будет выглядеть следующим образом:

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; 
} 

Я просто нужно будет раскрасить «А» строки элемента. Есть идеи?

Вы можете увидеть пример здесь: 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>