Question

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

git checkout master
git rm -rf *
git merge feature

Answer 1

我不认为您只能使用CSS且不使用JavaScript（或服务器端呈现）来实现此目的。

有很多使用JavaScript的方法。这是一个非常原始的（fiddle）：

<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）（fiddle）：

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

Answer 2

添加带有选项值的类别以选择标签

HTML

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

CSS

.color-always {
    background-color: #5a5a8d;
}
.color-tagged {
    background-color: #ecb102;
}
.color-never {
    background-color: #d6f843;
}

jQuery

$('select').on('change', function(ev) {
    var select = $(this);
    var value = select.val().toLowerCase();
    var className = 'color-' + value;
    $(this).attr('class', '').addClass(className);
});

示例：https://jsfiddle.net/colorswall/xpvt214o/999801/

Answer 3

HTML

<select id="select">
  <option value="always" color='red'>Always</option>
  <option value="tagged" color='blue'>Only when tagged</option>
  <option value="never" color='green'>Never</option>
</select>

jQuery

$('#select').on('change', function(e){
var sel = "option[value="+this.value+"]";
$('#select').attr('style', 'background-color:'+ $(sel).attr('color'));
});

提琴

https://jsfiddle.net/s9exy2rw/5/

Answer 4

您可以使用javascript来实现。

这里是一个示例：

HTML

<body id="bg-img">
    <select id="backgroundOptions">
      <option value="always">Always</option>
      <option value="tagged">Only when tagged</option>
      <option value="never">Never</option>
    </select>
</body>

JavaScript

function changeBackgroundColor() {
var elm = document.getElementById("backgroundOptions");
var bgOptions = elm.options[elm.selectedIndex].value;
element.classList.add(bgOptions);
}

CSS

.always {background-color: red;}
.tagged {background-color: blue;}
.never {background-color: yellow;}

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

4 个答案: