Set background color on select HTML tag based on the background of an OPTION tag

I have a simple select block which has three options: high, medium, low.

Each option has a background color that matches it value (red, yellow, green)

I would like to set background on the SELECT tag based on the color of the OPTION tag.

I am trying the following code however no matter how I try I get "rgb(0, 120, 215)" which I have no clue where comes from

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>

I need help setting background color on the SELECT tag based on the value of the OPTION tag

Does anyone how this can be achieved?

Solution

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