通过JavaScript填充HTML选择“颜色”

Question

我想通过Script填充我的颜色选择。 当我要填充颜色菜单时，请使用以下代码：

    function FillFontColorMenu() {
        FillSelection(GetPossibleColors(), "fontColorMenu"); // Color of the Font
    }

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

    function GetPossibleColors() { // Create an Array of Colors
        var possibleColors = [];

        possibleColors.push(0x333333);  // Add Color x
        possibleColors.push(0x666666);
        possibleColors.push(0x999999);

        return possibleColors; // Return the Colors
    }

    function FillSelection(possibleValues, elementId) { // Fill the Selection with the Colors
        for(var i = 0; i < possibleValues.length; i++) {
            var optionElement = "<option value='" + possibleValues[i] + "'>" + possibleValues[i] + "</option>"; // Pass in the Colors
            $('#'+elementId).append(optionElement);
        }
    }

如何将颜色存储到Array ？ 是否必须将值存储为RGB代码？ 我可以使用此颜色Array并在“ FillingMethod”中传递颜色吗？ 有没有办法做到这一点，还是我的想法胡扯，永远都行不通？

我试图创建一个显示我的问题的JsFiddle： Fiddle

Answer 1

您将颜色作为十六进制数字存储在Array中， JavaScript将所有数字视为双精度浮点数 。 在option中将颜色作为文本插入时，需要将数字转换为String 。 我建议您使用Number对象的toString方法，将16作为基数发送以获取数字的十六进制表示形式：

 FillFontColorMenu(); FillBackgroundColorMenu(); function FillFontColorMenu () { FillSelection(GetPossibleColors(), "fontColorMenu"); } function FillBackgroundColorMenu () { FillSelection(GetPossibleColors(), "backgroundColorMenu"); } function GetPossibleColors () { var possibleColors = []; possibleColors.push(0x333333); // TEST possibleColors.push(0x666666); // TEST possibleColors.push(0x999999); // TEST return possibleColors; } function FillSelection (possibleValues, elementId) { for(var i = 0; i < possibleValues.length; i++) { var optionElement = "<option value='" + possibleValues[i] + "'>#" + possibleValues[i].toString(16) + "</option>"; $('#'+elementId).append(optionElement); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="fontColorMenu"></select> <select id="backgroundColorMenu"></select>