时间戳

首页 > 解决方案 > 根据 OPTION 标记的背景在选定的 HTML 标记上设置背景颜色

javascript - 根据 OPTION 标记的背景在选定的 HTML 标记上设置背景颜色

问题描述

我有一个简单的选择块，它有三个选项：高、中、低。

每个选项都有一个与其值匹配的背景颜色（红色、黄色、绿色）

我想根据 OPTION 标签的颜色在 SELECT 标签上设置背景。

我正在尝试以下代码，但是无论我如何尝试，我都会得到“rgb(0, 120, 215)”，我不知道它是从哪里来的

var optionStyles = window.getComputedStyle(selectObj.options[selectObj.selectedIndex]);

selectObj.style.background = optionStyles.getPropertyValue('background-color');
<select class="severity">
        <option class="high" value="high">high</option>
        <option class="medium" value="medium">medium</option>
        <option class="low" value="low">low</option>
</select>

我需要帮助根据 OPTION 标记的值在 SELECT 标记上设置背景颜色

有谁可以做到这一点？

标签： javascriptbackground-color

解决方案

<html>

<head>
  <style>
    .high {
      background-color: red;
    }
    
    .medium {
      background-color: green;
    }
    
    .low {
      background-color: blue;
    }
    
    .other {
      background-color: white;
    }
  </style>
</head>

<body>
  <select id="demo" onchange="myFunction()">
    <option class="other">--Select--</option>
    <option class="high" value="high">high</option>
    <option class="medium" value="medium">medium</option>
    <option class="low" value="low">low</option>
  </select>


  <script>
    function myFunction() {
      var selectedvalue = document.getElementById("demo").value;
      document.getElementById("demo").classList.remove();
      document.getElementById("demo").classList.add(selectedvalue);
    }
  </script>
</body>

</html>

推荐阅读