希望这里有一个简单的问题。我有以下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绝对是公平的游戏。谢谢!
答案 0 :(得分:3)
此处: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());
});
答案 1 :(得分:0)
你不能只用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>