基於選擇值的CSS背景顏色

Question

希望這里有個簡單的問題。 我有以下html代碼：

<select id="dropdown">
  <option value="#00FFFF">Cyan</option>
  <option value="#FF00FF">Magenta</option>
</select>
<textarea style="background-color:[dropdown's selected value]">Sample Text</textarea>

我想要的是textarea的背景顏色，可根據下拉菜單的選擇動態更改。 有沒有一種簡單的方法可以使用CSS引用下拉列表的值，還是JavaScript是更好的方法？ HTML5和CSS3在這里絕對是公平的游戲。 謝謝！

Answer 1

在這里： 演示

<select id="dropdown">
  <option value="#00FFFF">Cyan</option>
  <option value="#FF00FF">Magenta</option>
</select>


<textarea>Sample Text</textarea>​

jQuery容易得多

    $('#dropdown').change(function(){
       $('textarea ').css('background-color', $(this).val());
    });​

Answer 2

您不能僅使用HTML和CSS來執行此操作。 需要一些JavaScript。 例：

<select id="dropdown" onchange="setBg(this)">
  <option selected value="#FFFFFF">White</option>
  <option value="#00FFFF">Cyan</option>
  <option value="#FF00FF">Magenta</option>
</select>
<textarea id="ta">Sample Text</textarea>
<script>
function setBg(sel) { 
  document.getElementById('ta').style.background = 
     sel.options[sel.selectedIndex].value;
}
</script>