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

我有一个下拉列表，并且需要使用Javascript在下拉列表中显示所有颜色。使用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

来源

2016-02-29 Gary

使用'UL，而不是'select' li'。选择是有限的造型。 – mmativ

'ul li'作为下拉菜单具有有限的功能。总是选择可用性而非造型。 – GolezTrol

可能的重复[如何添加选择框中的选项的背景图像？]（http://stackoverflow.com/questions/11207223/how-to-add-background-image-for-options-in-a-select -box） – GolezTrol

您可以添加颜色的图像选项其次是颜色

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

来源

2016-02-29 05:35:44

的名称试试这个，可以帮助你..

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

来源

2016-02-29 05:36:57 Illaya

尝试利用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>

来源

2016-02-29 11:14:18 guest271314

包括'form'，'select'元素，其中value设置为在plnkr选择'li'元素http://plnkr.co/edit/xIZhMgo95NOuZwtuMNtq?p=preview – guest271314

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

回答

相关问题