如何在使用javascript更改/选择选项时更改下拉选项的css背景颜色？

Question

这里有下拉菜单：

 <select name="sourcesSelect" id="{{this.commonID}}" class="custom-select sources" data-color="" placeholder="{{this.status}}">
      <option value="0">In Progress</option>
      <option value="1">Done</option>
      <option value="2">Rejected</option>
    </select>

这是这个选择菜单默认的css：

.custom-select-trigger {
    position: relative;
    display: block;
    width: 280px;
    padding: 0 64px 0 20px;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    line-height: 30px;
    background: #265a88;
    border-radius: 4px;
    cursor: pointer;
  }

我想要什么：当我选择选项 0 时，下拉菜单颜色变为绿色。选项 1 应变为红色，选项 2 应变为黄色。

我怎样才能做到这一点？

这是在此下拉菜单上动态应用 css：

$(".custom-select").each(function() {
var classes = $(this).attr("class"),
    id      = $(this).attr("id"),
    name    = $(this).attr("name");

var template =  '<div class="' + classes + '">';
    template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
    template += '<div class="custom-options">';
    $(this).find("option").each(function() {
      template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
    });
template += '</div></div>';

$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});

$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
}, function() {
$(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
$('html').one('click',function() {
  $(".custom-select").removeClass("opened");
});

$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $.LoadingOverlay("show");

$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
var id = $(this).parents(".custom-select-wrapper").find("select").attr("id");
var placeholder = $(this).parents(".custom-select-wrapper").find("select").attr("placeholder");
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
 // alert(placeholder);
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());

Answer 1

我认为你可以做的是给每个选项一个新的类/ID，或者像.custom-select-trigger > option 一样在CSS中将它们作为子元素访问，尽管我更喜欢前者而不是后者，因为它允许更多和单独的控制在选项。你可以把它们写成

<option value = "0" class = "option_0"> ---Content---</option>

然后您可以在 CSS 中使用类名访问它。要更改交互颜色，鼠标悬停，请使用

.option_0:hover{background: red;}

或点击

.option_0:active{background: red;}

其余的也一样。