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

我想要的是根据下拉菜单的选择动态更改文本区域的背景颜色。有没有一种简单的方法可以使用 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());
    });​