效果图如下:
原创代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ColorDropDownList</title>
<script type="text/javascript">
function ColorList()
{
var hc = ["FF","CC","99","66","33","00"];
var r,g,b,color;
var colors = new Array();
for(r=0;r<6;r++)
{
for(g=0;g<6;g++)
{
for(b=0;b<6;b++)
{
color = "#" + hc[r] + hc[g] + hc[b];
colors.push(color);
}
}
}
return colors;
}
function pageload()
{
var objSelect = document.getElementById("mulSelect");
var aryColor = ColorList();
for(var i=0; i<aryColor.length; i++)
{
objSelect.options[i] = new Option(aryColor[i],aryColor[i]);
objSelect.options[i].style.backgroundColor = aryColor[i];
}
}
function once()
{
var objSelect = document.getElementById("mulSelect");
var aryColor = ColorList();
for(var i=0; i<aryColor.length; i++)
{
objSelect.options[objSelect.options.length] = new Option(aryColor[i],aryColor[i]);
}
for(var j=0; j<objSelect.options.length; j++)
{
objSelect.options[j].style.backgroundColor = objSelect.options[j].value;
}
}
window.onload = function()
{
//once();
pageload();
}
</script>
</head>
<body>
<select id="mulSelect"></select>
</body>
</html>