我应该如何在 <select> 中显示数组颜色列表答案

【问题标题】：How should I show list of array colors in a <select>我应该如何在 <select> 中显示数组颜色列表
【发布时间】：2015-12-24 08:48:12
【问题描述】：

我是新手，我不知道如何实现我想要的。嗯，我有这段代码，目前正在学习中。

var color = ["#AAAAAA" , "#FF9992", "#BF9232"];
$("#button1").click(function() {
  // I have a print a the colors in array in <select><option>

});

单击按钮时，我想创建一个包含数组中所有颜色的<select> 标记，并填充<option> 的背景颜色作为颜色的值。

我不确定我该如何继续。我所知道的是它可以使用 jQuery 来完成，因为数组是动态的。提前致谢。

【问题讨论】：

标签： javascript jquery html css colors

【解决方案1】：

我建议使用纯 JavaScript 的其他解决方案。

var color = ["#AAAAAA" , "#FF9992", "#BF9232"];

function addOptions(arr, selectId) {
    var s = document.getElementById(selectId);
    if (!s) {
        s = document.createElement("select");
        var myDiv = document.getElementById("box");
        myDiv.appendChild(s);

        s.id = selectId;
    }
    s.options.length = 0;

    for (var i = 0; i < arr.length; i++) {
        var option = document.createElement('option');
        option.text = arr[i];
        option.style.backgroundColor = arr[i];
        option.value = arr[i];
        s.options[s.options.length] = option;
    }
}


document.getElementById("button").onclick = function () {
    addOptions(color, "second");
};

<button id="button">Click me</button>
<div id="box"></div>

【讨论】：

很好...这是纯 JavaScript 方式。

【解决方案2】：

您可以使用数组的.map() 函数来完成。使用这种方式：

var color = ["#AAAAAA" , "#FF9992", "#BF9232"];
$("#button1").click(function() {
  $("div").append("<select />");
  var html = "";
  color.map(function (clr) {
    html += '<option style="background: ' + clr + ';">' + clr + '</option>';
  });
  $("select").append(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="button1">Click</button>
<div></div>

如果你想让<select>根据<option>改变背景颜色，那么你可以这样做：

var color = ["#AAAAAA" , "#FF9992", "#BF9232"];
$("#button1").click(function() {
  $("div").append("<select />");
  var html = "";
  color.map(function (clr) {
    html += '<option style="background: ' + clr + ';">' + clr + '</option>';
  });
  $("select").append(html).change(function () {
    $(this).css("background", $(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="button1">Click</button>
<div></div>

【讨论】：

你给我的第一个答案是通过问题回答的。是否有更多方法可以提高效率？
谢谢，兄弟。我不知道可以为选项设置任何颜色
@SheraliTurdiyev 是的，它的支持较少。
@TEniDign 这是 AFAIK 的一种体面且高效的方式。
我们还需要 $("div").append(""); 吗？