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

Question

I am a newbie, and I am not sure how to achieve what I want. Well, I have this piece of code, which I am learning currently.

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

});

On clicking the button I would like to create a <select> tag with all the colours in the array, populated with the <option> 's background colour being the value of the colour.

I am not sure how I could proceed. All I know is it can be done using jQuery as the array is dynamic. Thanks in advance.

Answer 1

You can do it using .map() function of the array. Use this way:

 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>

If you want the <select> to change the background colour based on the <option> , then you can do this:

 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>

Answer 2

I suggest other solution with plain 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>