如何使用 jquery 更改选择框中特定单词的文本颜色

Question

我有一个包含几个值的选择框。其中一个值 id Offside。文本越位应始终为红色。（我使用 bootstrap 中的 text-danger class 将其着色为红色）

<select>
  <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>

我已经用 jquery 做到了，如下所示：

$(".blog-category:contains(Offside)").addClass('text-danger');

现在我想实现的是：如果选择越位，则将所选文本也设为红色。如果选择了另一个值，请不要将其设为红色！

这是我的fiddle：https://jsfiddle.net/jyut4xgk/4/

我怎样才能做到这一点？

Answer 1

将 class 添加到 select 我们可以触发的位置：

<select class="category">
  <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>
<br /><br />
<select class="category">
  <option class="blog-category" value="Apple" selected>Apple</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>

现在在你的 js 中：

$(".blog-category:contains(Offside)").addClass('text-danger');

$('.category option:selected:contains(Offside)').closest('select').addClass('text-danger');

Fiddle

如何使用 jquery 更改选择框中特定单词的文本颜色

how to change text color of a particular word in a selectbox with jquery

jquery

drop-down-menu