使用Javascript在下拉控件中显示颜色 [英] Displaying color in dropdown control using Javascript

问题描述

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

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.

必需的DropDown格式

推荐答案

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

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

这篇关于使用Javascript在下拉控件中显示颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！