2017-02-15 40 views
2

我正在填写Html Select by Script。我的两个选择是Colorpickers。当你选择一个号码选择号码时,你可以在选择的顶部看到选定的号码。Html选择 - >选项,所选颜色作为值

这是如何工作的颜色?我知道,你不能在那里填充颜色。但有没有办法显示选定的颜色?

我想过写在“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

+0

寻找呢? http://stackoverflow.com/a/36688166/2724173 –

+0

嗯不是直接。我几乎已经知道了,我只需要在选区顶部着色所选元素。你可以在这里看到它的图片:https://ibin.co/3CSP15pLpLmj.png – peterHasemann

回答

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>

+0

把'color'改成'background-color',就像你给的图像一样。 –

+0

非常感谢! :) – peterHasemann