如何将背景色应用于所选选项？ [英] How to apply background-color to a selected option?

问题描述

我正在编写一个包含几个选项及其颜色的下拉菜单。我已经成功地为每个选项的背景着色。但是，一旦选择，背景颜色就不会显示。

是否可以更改此行为？我的HTML示例如下：

 < select> 
< option style = background-color：green>成功< / option> 
< option style =" background-color：orange"处理失败< / option> 
< option style =背景色：紫色>放弃< / option> 
< / select> 
  

或也在这里： http://jsfiddle.net/H8HVm/1/ 。

解决方案

您可以使用jQuery读取所选选项的类然后设置该类作为< select> 的类。这是代码，然后是小提琴：

  $（＃color_me）。change （function（）{
 var color = $（ option：selected，this）.attr（ class）; 
 $（＃color_me）。attr（ class，color） ; 
}）;  

  .green {
 background-color：绿色； 
} 
 .orange {
 background-color：orange; 
} 
 .pink {
 background-color：pink; 
}  

 < script src = https ：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script> 
<选择id = color_me class => 
< option class = green>成功< / option> 
< option class = orange>处理失败< / option> 
< option class = pink> abandoned< / option> 
< / select>  

这是JSFiddle： http://jsfiddle.net/DrydenLong/3QUN6/

每个请求，这是上面我的代码的细分：

  $（＃color_me）。change（function（）{
  

当具有 me的 id 的元素更改时，此行调用函数

  var color = $（ option：selected，this）.attr（ class）； 
  

这将变量 color 定义为当前选择的选项的类是 this 变量是指我们在第一行中引用的DOM元素。基本上 this 可以确保我们从正确的< select> 中获取类。 code>，即< select> >我们只需单击。

  $（＃color_me）。attr（ class，color）; 
}）； 
  

此行将上面定义的 color 变量分配为<$元素的c $ c>类，其 id 为 #color_me 。 p>


I'm writing a dropdown menu with several options and their colors. I have successfully colored the background of each option; however, once selected that background color doesn't show.

Is there a way to change this behavior? Example of my HTML below:

<select>
  <option style="background-color: green">Successful</option>
  <option style="background-color: orange">Process Failure</option>
  <option style="background-color: purple">Abandoned</option>
</select>

or also here: http://jsfiddle.net/H8HVm/1/.

解决方案

You can use jQuery to read the class of the selected option then set that class as the class of the <select>. Here is the code, followed by a fiddle:

$("#color_me").change(function(){
    var color = $("option:selected", this).attr("class");
    $("#color_me").attr("class", color);
});

.green {
    background-color: green;
}
.orange {
    background-color: orange;
}
.pink {
    background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="color_me" class="">
    <option class="green">successful</option>
    <option class="orange">process failure</option>
    <option class="pink">abandoned</option>
</select>

Here's the JSFiddle: http://jsfiddle.net/DrydenLong/3QUN6/

Per request, here is a breakdown of my code above:

$("#color_me").change(function(){ 

This line calls function when the element with the id of "color_me" is changed. i.e. an option from the select list is chosen.

    var color = $("option:selected", this).attr("class");

This defines the variable color as whatever the class of the current selected option is. The this variable is referring to the DOM element we referenced in the first line. Basically this ensures that we are getting the class from the correct <select> i.e. the <select> we just clicked on.

    $("#color_me").attr("class", color);
});

This line assigns the color variable defined above as the class of the element with the id of #color_me.

这篇关于如何将背景色应用于所选选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！