使用Javascript

Question

我有一个下拉菜单，我需要使用Javascript显示下拉列表中的所有颜色。

我用这种方式编码。这使得背景颜色按照我从下拉菜单中选择的颜色进行着色。

<select id="colorSelect" class="colorSelect" onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor" > 
   <option selected value="blue" style = "background:black"></option>
   <option value="red" style = "background:red"></option>
   <option value="green" style = "background:green"></option>
   <option value="yellow" style = "background:yellow"></option>
   <option value="gray" style = "background:gray"></option>
   <option value="pink" style = "background:pink"></option>
   <option value="orange" style = "background:orange"></option>
   <option value="aqua" style = "background:aqua"></option>
</select>

但我需要类似下图所示的内容。您能否建议如何实现此功能？从下拉列表中选择任何颜色都应保留该值。

Required DropDown Format

Answer 1

试试这个并对你有帮助..

HTML:
<select id="colorSelect" class="colorSelect" onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor" > 
   <option selected value="black" data-val="black"  style = "background:black">black</option>
   <option value="red" data-val="red" style = "background:red">red</option>
   <option value="green" data-val="green" style = "background:green">green</option>
   <option value="yellow" data-val="yellow" style = "background:yellow">yellow</option>
   <option value="gray" data-val="gray" style = "background:gray">gray</option>
   <option value="pink" data-val="pink" style = "background:pink">pink</option>
   <option value="orange" data-val="orange" style = "background:orange">orange</option>
   <option value="aqua" data-val="aqua" style = "background:aqua">aqua</option>
</select>

<p>Hey! have a Good Day!</p>


CSS:
option{
  color:#FFF;
}

SCRIPT:
$(function(){
  $('#colorSelect').change(function(){
    var colorVal = $(this).val();
    $('p').css('color',colorVal);
  });
});

http://codepen.io/anon/pen/dMyEdm

Answer 2

您可以将颜色图像添加到选项后跟该颜色的名称

     <select id="colorSelect" class="colorSelect"     onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> 
   <option selected value="blue" style = "background:black"><a href=Blueimg></option>
   <option value="red" style = "background:red"><a href=redimg></option>
   <option value="green" style = "background:green"><a href=greenimg></option>
   <option value="yellow" style = "background:yellow"><a href=yellowimg></option>
   <option value="gray" style = "background:gray"><a href=greyimg></option>
   <option value="pink" style = "background:pink"><a href=pinkimg></option>
   <option value="orange" style = "background:orange"><a href=orangeimg></option>
   <option value="aqua" style = "background:aqua"><a href=aquaimg></option>
</select>

Answer 3

尝试使用ul，li，button元素

$(function() {

  var colors = ["blue", "red", "green", "yellow"
                , "gray", "pink", "orange", "aqua"];

  $.each(colors, function(index, color) {
    $("<li>", {
      html: $("<button>", {
        css: {
          width: "50px",
          height: "24px",
          padding: "4px",
          border: "1px solid #000",
          background: colors[index]
        }
      }),
      append: "\n" + colors[index],
      appendTo:"#colorSelect",
      css: {
        listStyle: "none",
        textTransform: "capitalize",
        width: "150px",
        padding: "4px",
        margin: "1px",
        outline: "1px solid #000",
        fontFamily: "arial"
      },
      on: {
        "mouseenter": function() {
          if (!$(this).is("li:first")) {
            $(this).css("backgroundColor", "skyblue")
          }
        },
        "mouseleave": function() {
          $(this).css("backgroundColor", "transparent")
        }
      }
    })
  });

  $("#colorSelect li:not(:first)")
    .hide()
    .siblings(":first")
    .clone(true)
    .hide()
    .insertAfter("#colorSelect li:first")
    .parent()
    .click(function(e) {
      if ($(e.target).is("li:first, button:first")) {
        $(e.target).closest("li").siblings().toggle()
      } else {
        $(e.target).closest("ul")
        .find(":first")
        .html($(e.target).closest("li").html())
        .trigger("mouseleave")
        .siblings().toggle()
      }
    })

});

ul {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  -webkit-padding-start: 0px;
  width: 160px;
  height: 32px;
  left: 24px;
  position: relative;
}
ul li:nth-child(1):after {
  position: absolute;
  content: "▼";
  right: 10px;
  top: 10px;
  font-size: 12px;
  opacity: .75;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul id="colorSelect" class="colorSelect"></ul>