javascript - 如何在不为所有其他选项设置样式的情况下使用 CSS 设置所选选项的样式？

Question

如何将 CSS 背景色仅应用于选定的选项？如果我将一个类应用于选择对象，它会设置所有选项的样式。如果我将所需的类应用于选项，则在展开选择框时我可以看到所有选项的样式都很好。但是，当Select框崩溃时，选定选项的样式就消失了。我在最新版本的 Chrome 和 Firefox 中观察到这种行为。

这是一些 super 基本的示例代码。如果没有 jQuery，所选择的选项总是显示无样式。使用 jQuery，一旦选择了“已修改”选项，所有选项的样式都将设置为“已修改”。我一直没能找到解决这个问题的方法...有什么想法吗？

我不想更改选项的样式。只能在选择任何给定选项时看到其样式，而不会覆盖其他选项的样式。

<style>
  select.modified,
  option.modified{
    background-color: red;
  }
</style>

<select id="example">
  <option value="bird" class="modified">bird</option>
  <option value="cat">cat</option>
  <option value="dog" class="modified">dog</option>
</select>

<script>
  $('#example').on('change',function(){
    $(this).prop('class',$(this).find('option:selected').prop('class'));  
  });
</script>

Answer 1

试试这个:

$('#example').on('change',function(){
   $(':selected', this).addClass('modified').siblings().removeClass('modified')
});

option.modified{
   background-color: red;
}

FIDDLE