Question

我有一个带有多个选项的select标记，第一个孩子是初始值。让我们考虑以下示例。值make是初始值。现在我要寻找的是，当选择一个值（丰田）时，它应该同时更改选择标记和选择的选项的颜色。为了使其更清晰，只需遵循以下情形即可。选择初始值后，应遵循以下颜色代码，选择标签变为绿色。选项标签变为蓝色。所选选项由于其为初始值而变为蓝色。当选择除初始文本（make）以外的值时，它应遵循以下颜色代码，选择标签变为红色。选项标签变为蓝色。所选选项变为红色。选择 { 颜色：绿色； } select.active选项{ 颜色：蓝色； } select.active选项[selected =“ selected”] { 红色; }

Answer 1

您可以执行以下jQuery change事件：

$(document).on('change', 'select.make', function() {
    if($(this).find(":selected").text()=="Make"){
        $(this).css("color","green");
        $(this).find(":selected").css("color","blue"); 
    }
    else $(this).css("color","red");    
});

select {
  color: green;
}

select option {
  color: blue;
}

select option:checked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="make active">
  <option value="">Make</option>
  <option value="">Saab</option>
  <option value="" selected>Toyoto</option>
  <option value="">Audi</option>
</select>

Answer 2

您需要使用JavaScript。例如，您可以在选择项上使用事件监听器，并为特定选项添加一个类。

document.querySelector('#variable-select').addEventListener('change', function(e) {
  if(e.target.options[e.target.selectedIndex].value === 'toyota') {
  	e.target.classList.add('blue');
  }
})

   
.blue {
    color: blue;
}

<select id="variable-select" class="make active">
  <option value="">Make</option>
  <option value="saab">Saab</option>
  <option value="toyota" selected="selected">Toyoto</option>
  <option value="audi">Audi</option>
</select>

但是您不能可靠地更改许多表单元素（如select）的样式。大多数浏览器都不允许样式化选择元素。

在<select>

2 个答案: