单击后使用 id 元素更改 HTML <option> 标签的颜色

Question

我试图为此找到解决方案，但我还没有找到我想要的。这是一个例子：

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>

例如，在单击 "Ford" 选项后，它的颜色会变为红色。我是 Jquery 的新手，我首先想知道的是，如果可以的话，那怎么办请注意，在满足条件后，我的目标是单个值。所以我想知道的是，如果可能的话，语法会改变与某些 id 相关的元素的颜色（SELECT 菜单关闭后）。

提前致谢。

Answer 1

使用查找找到 selected option onchange 并使用 .css

应用颜色

$(document).ready(function() {
    $('select').change(function() {
    $(this).find('option').css('background-color', 'white');
      $(this).css('background-color', 'red');
  })
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
  </select>
</div>

单击后使用 id 元素更改 HTML <option> 标签的颜色

Change color of HTML <option> Tag using id element after being clicked

jquery

html-select

interactive

drop-down-menu