如何使用 jquery 更改选择框中所选选项的颜色

Question

我有一个 select 有几个选项，其中之一是 Offside。这个应该是红色的。当越位 selected 时，它应该是红色的，而且效果很好。

但是当我将 selected 更改为时，例如 Apple，Apple 应该像 selected 一样被涂成黑色。当 Apple selected 并且我选择 Offside 选项时，它应该是红色的。我没有成功。

$('.blog-category:contains(Offside)').addClass('text-red'); // make Offside in options red

$('.categories option:selected:contains(Offside)').closest('select').addClass('text-red');
//$('.categories option:selected:not(contains(Offside)').closest('select').addClass('text-black');

.text-red {
  color: red;
}

.text-black {
  color: black;
}

select option {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select class="categories">
  <option class="blog-category" value="Offside" selected>Offside</option>
  <option class="blog-category" value="Apple">Apple</option>
  <option class="blog-category" value="Banana">Banana</option>
  <option class="blog-category" value="Peach">Peach</option>
  <option class="blog-category" value="Orange">Orange</option>
  <option class="blog-category" value="Offside">Offside</option>
</select>

<select class="categories">
  <option class="blog-category" value="Apple" selected>Apple</option>
  <option class="blog-category" value="Banana">Banana</option>
  <option class="blog-category" value="Peach">Peach</option>
  <option class="blog-category" value="Orange">Orange</option>
  <option class="blog-category" value="Offside">Offside</option>
</select>

她是我的fiddle：https://jsfiddle.net/hfL3cw58/2/

Answer 1

要完成这项工作，您需要根据 Offside 选项是否被 selected 在 select 上切换 text-red class。您可以通过附加 change 事件处理程序并根据需要切换 class 来执行此操作。试试这个：

$('select option:contains("Offside")').css('color', 'red');

$('.categories').on('change', e => {
  $(e.target).toggleClass('text-red', e.target.value === 'Offside')
}).trigger('change');

.text-red {
  color: red;
}

.text-black {
  color: black;
}

select option {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select class="categories">
  <option class="blog-category" value="Offside" selected>Offside</option>
  <option class="blog-category" value="Apple">Apple</option>
  <option class="blog-category" value="Banana">Banana</option>
  <option class="blog-category" value="Peach">Peach</option>
  <option class="blog-category" value="Orange">Orange</option>
  <option class="blog-category" value="Offside">Offside</option>
</select>

<select class="categories">
  <option class="blog-category" value="Apple" selected>Apple</option>
  <option class="blog-category" value="Banana">Banana</option>
  <option class="blog-category" value="Peach">Peach</option>
  <option class="blog-category" value="Orange">Orange</option>
  <option class="blog-category" value="Offside">Offside</option>
</select>

这里要注意的一件事是，更改 option 元素的 CSS 属性在浏览器中的支持不佳。如果你需要它可靠地工作，我建议使用第三方 select 库，它允许你完全控制 UI，例如 Chosen or Select2

Answer 2

您的 JS 的问题是您添加了 class 但在不需要时没有删除它，因此您无法获得所需的结果。在你的 JS 中试试这个，它会工作正常。

$(document).ready(function(){
    $(".categories").each(selectColorChange);
});
$('.categories').on("change",selectColorChange);
function selectColorChange(){
    var x = $(this).find("option:selected").val()
  if(x=="Offside"){
    $(this).addClass("text-red");
  }else{
    $(this).removeClass("text-red");
  }
}

我已经对您的 fiddle 进行了编辑。查看：https://jsfiddle.net/9paLnzhc/

如何使用 jquery 更改选择框中所选选项的颜色

How to change the color from selected option in selectbox with jquery

jquery

drop-down-menu