JavaScript ColorDropDownList

效果图如下:


原创代码如下:

<!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>

posted @ 2007-07-05 17:18  亦续缘  阅读(195)  评论(1编辑  收藏  举报