基於選擇值的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

這裏：DEMO

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