选择框背景颜色html

Question

这是我的问题的参考图片。

我在HTML中有一个选择框，其颜色如上图和下面的代码所示。使用CSS，我有一些类，使各种option元素着色。我怎样才能使所选项目的颜色相同？

在图片中，选择了红色，但所选项目的背景仍为白色。另外，有没有办法禁用悬停效果？了解标记为orange的项目何时悬停在突出显示为蓝色的位置？ （注意：我按下按钮后，我已经使用JavaScript和jQuery将项目放入选择器。）

<div class="selection">
    <select id="color">
        <option class="selectionpurple" value="purple">purple</option>
        <option class="selectionblue" value="blue">blue</option>
        <option class="selectionred" value="red">red</option>
        <option class="selectiongreen" value="green">green</option>
        <option class="selectionorange" value="orange">orange</option>
    </select>
</div>

Answer 1

您可以使用jquery change()函数来实现此目的。每次选择选项时都会运行change()。您只需获取所选选项的值，并使用jquery css()函数应用该样式进行选择。

＆＃13;

＆＃13;

var selected = $("select option:selected").val();
$('select').css('backgroundColor', selected);

$( "select" ).change(function () {
    console.log($(this).val());
    $('select').css('backgroundColor', $(this).val())
})

＆＃13;

.red {
background-color : red;
}
.blue {
background-color : blue;
}
.green {
background-color : green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text"> 
  <option value="red" class="red" selected>red</option> 
  <option value="blue" class="blue">blue</option>
  <option value="green" class="green">green</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

var selected = $("select option:selected").val();
$('select').css('backgroundColor', selected);

$( "select" ).change(function () {
    console.log($(this).val());
    $('select').css('backgroundColor', $(this).val())
})

.red {
background-color : red;
}
.blue {
background-color : blue;
}
.green {
background-color : green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text"> 
  <option value="red" class="red" selected>red</option> 
  <option value="blue" class="blue">blue</option>
  <option value="green" class="green">green</option>
</select>