Question

我是新手，我不知道如何实现我想要的。好吧，我有这段代码，我目前正在学习。 var color = [“＃AAAAAA”，“＃FF9992”，“＃BF9232”]; $（“＃button1”）。click（function（）{ //我在＆lt; select＆gt;＆lt; option＆gt;中打印了数组中的颜色 }）; 点击按钮后我想创建一个＆lt; select＆gt;标记数组中的所有颜色，填充了＆lt; option＆gt;的背景颜色作为颜色的值。我不知道如何继续。我所知道的是它可以使用jQuery来完成，因为数组是动态的。提前致谢。

Answer 1

您可以使用数组的.map()函数来执行此操作。使用这种方式：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您希望<select>根据<option>更改背景颜色，则可以执行以下操作：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

我应该如何在<select>

2 个答案: