基于选择值的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>