使用Javascript在下拉控件中显示颜色

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

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

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

必需的DropDown格式

Answer 1

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

 HTML:  black red green yellow gray pink orange aqua  
Hey! have a Good Day!
 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

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

Answer 3

尝试使用ul ， li ， button元素

 $(function() { var colors = ["blue", "red", "green", "yellow" , "gray", "pink", "orange", "aqua"]; $.each(colors, function(index, color) { $("
", { html: $("", { 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; }