我应该如何显示阵列颜色列表<select>

Question

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

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

}); 

在点击按钮我想创建一个<select>标签与所述阵列中的所有颜色，填充了<option>的背景颜色是彩色的值。

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

Answer 1

您可以使用数组的.map()函数。用这样的方式：如果你想<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); 
 
});

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

，那么你可以这样做：

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

我建议使用普通J的其他解决方案avaScript。

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>