Displaying color in dropdown control using Javascript

Question

I have a drop down and I need to display all the colors in the drop down using Javascript.

I have coded this way. which makes the back ground colored as per the color I select from the drop down.

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

But I need something like the image below. Can you please suggest how to achieve this functionality? Selecting any color from the dropdown should retain the value.

Required DropDown Format

Use `ul li` instead of `select`. select are limited styling. — mmativ, Feb 29 '16 at 05:09
`ul li` have limited functionality as a dropdown. Always choose usability over styling. — GolezTrol, Feb 29 '16 at 05:11
Possible duplicate of [How to add background image for options in a select box?](http://stackoverflow.com/questions/11207223/how-to-add-background-image-for-options-in-a-select-box) — GolezTrol, Feb 29 '16 at 05:14
If you are trying to make bootstrap color picker, here is a nice one http://lauren.github.io/pick-a-color/ — Santhosh, Feb 29 '16 at 05:20

score 1 · Answer 1 · answered Feb 29 '16 at 05:36

Try this and can be helpful to you..

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

score 0 · Answer 2 · answered Feb 29 '16 at 05:35

You can add image of Colors to the options followed by name of that Color

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

score 0 · Answer 3 · answered Feb 29 '16 at 11:14

Try utilizing ul , li , button elements

$(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>

Including `form`, `select` element where value is set to selected `li` element at plnkr http://plnkr.co/edit/xIZhMgo95NOuZwtuMNtq?p=preview — guest271314, Mar 07 '16 at 02:38

Displaying color in dropdown control using Javascript

3 Answers3

Linked