Блог

Главная - Вопросы по программированию - Установка цвета фона для выбранного HTML-тега на основе фона тега ОПЦИИ

Установка цвета фона для выбранного HTML-тега на основе фона тега ОПЦИИ

#javascript #background-color

#javascript #background-color

Вопрос:

У меня есть простой блок выбора, который имеет три варианта: высокий, средний, низкий.

Каждый параметр имеет цвет фона, соответствующий его значению (красный, желтый, зеленый)

Я хотел бы установить фон для тега ВЫБОРА на основе цвета тега ОПЦИИ.

Я пытаюсь выполнить следующий код, однако, как бы я ни старался, я получаю «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>

Мне нужна помощь в настройке цвета фона для тега выбора на основе значения тега ОПЦИИ

Кто-нибудь знает, как этого можно достичь?

Ответ №1:

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

Комментарии:

1. Большое тебе спасибо, Мохаммад! Ваш ответ действительно решает мою проблему!