我應該如何顯示陣列顏色列表<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>