Question

我要做的就是保留所选选项的颜色，使其显示在选择框中。

<div class="controls col-sm-2">
  <select class="form-control">
    <option>SELECT</option>
    <option style="color:red;background:red">RED</option>
    <option style="color:blue;background:blue">BLUE</option>
    <option style="color:gold;background:gold">GOLD</option>
    <option style="color:orange;background:orange">ORANGE</option>
    <option style="color:green;background:green">GREEN</option>
  </select>
</div>

彩色条显示在下拉列表中，但在选择框时会丢失。有没有办法在选择框中保留显示的颜色？这不是关键任务或任何事情，但我认为可能有一种方法可以保持造型。

Answer 1

我可以使用jQuery为您的具体案例找到答案：

$(".form-control").change(function(){

$(this).css("background-color", $(this).val());

});

Answer 2

可能（尽管不是严格推荐;）对标记进行一些调整：

<div class="controls col-sm-2">
  <select class="form-control">
    <option value="">SELECT</option>
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="gold">GOLD</option>
    <option value="orange">ORANGE</option>
    <option value="green">GREEN</option>
  </select>
</div>

...和CSS：

select, option {
  background-color: #fff;
}

select.red,
option[value='red'] { background-color: red; }

select.blue,
option[value='blue'] { background-color: blue; }

select.gold,
option[value='gold'] { background-color: gold; }

select.orange,
option[value='orange'] { background-color: orange; }

select.green,
option[value='green'] { background-color: green; }

不幸的是，为了获得你所追求的行为，你还需要一些JavaScript（jQuery风格如下）：

// every time we change the selection in the dropdown ...
$('select').on('change', function() {
    $(this)
        // clear any previous selection defined in the class
        .attr('class', 'form-control')
        // now add the selected value as an additional class (which we can target via CSS)
        .addClass($(this).children(':selected').val());
});

请注意，这会影响页面上的每个<select>元素，因此您可能希望使用（例如）特定类来定位颜色下拉变量，例如select.colour-dropdown。

http://www.bootply.com/ppZL9u1FAO上的演示。

有没有办法让选定的选择框选项变为彩色？

2 个答案: