时间戳

首页 > 解决方案 > 如何根据选择的结果更改选择的颜色？

html - 如何根据选择的结果更改选择的颜色？

问题描述

我有一个选择，我需要根据所选答案更改背景。

<select>
  <option value="always">Always</option>
  <option value="tagged">Only when tagged</option>
  <option value="never">Never</option>
</select>

标签： htmlcss

解决方案

我不相信你可以只用 CSS 而不用 JavaScript（或服务器端渲染）来做到这一点。

使用 JavaScript 有很多方法可以做到这一点。这是一个非常香草的（小提琴）：

<script>
  function valueChanged(val) {
    var elem = document.querySelector('select'); // or whatever element needs to change background color
    var color;
    if (val === 'always') {
        color = 'green'; // or whatever color
    }
    else if (val === 'tagged') {
      color = 'yellow';
    }
    else if (val === 'never') {
      color = 'red';    
    }
    if (color) {
      elem.style['background-color'] = color;
    }
  }
</script>
<select onChange="valueChanged(this.value)">
  <option value="always">Always</option>
  <option value="tagged">Only when tagged</option>
  <option value="never">Never</option>
</select>

或者使用 CSS（但仍然是 JavaScript）（小提琴）：

<style>
  .always {
    background-color: green;
  }
  .tagged {
    background-color: yellow;
  }
  .never {
    background-color: red;
  }
</style>
<script>
  function valueChanged(val) {
    var elem = document.querySelector('select'); // or whatever element needs to change background color
    elem.className = val;
  }
</script>
<select onChange="valueChanged(this.value)">
  <option value="always">Always</option>
  <option value="tagged">Only when tagged</option>
  <option value="never">Never</option>
</select>

推荐阅读