下拉选择器使用JS和CSS更改DIV的颜色

Question

我需要的是一个简单的颜色选择器(最大6-8色),因此用户可以选择将在日历中输入的事件的颜色.

我已经测试了几个jQuery colopicker插件,但没有一个在我的项目中运行良好.

要么它们太复杂(如Farbtastic),要么很简单,但不能在最新版本的jQuery上运行.

所以我决定提供一个带有颜色列表的好的下拉菜单

<select id="evt_color"> 
<option value="#3366CC">Blue</option> 
<option value="#E070D6">Fuchsia</option> 
<option value="#808080">Gray</option> 
<option value="#4bb64f">Green</option> 
<option value="#ed9d2b">Orange</option> 
<option value="#FF9CB3">Pink</option> 
<option value="#EA4A4A">Red</option> 
</select>

这很好用.但在提交表单之前,我想给用户一些关于他们选择的颜色的反馈.

我想知道我们是否可以在下拉列表旁边创建一个小方块DIV,并通过类似或其他方法background-color更改所选颜色的值.默认情况下,将选择第一种颜色(蓝色).onChangegetElementById

有人对此提出建议吗？欢迎使用jQuery或raw JS建议!

谢谢你的帮助!

Answer 1

$(document).ready(function() {
    $("#evt_color").change(function() {
        $("#someDiv").css("background-color", $(this).val());
    }).change(); // trigger change event so div starts out with a colour
                 // on page load
});

你可以在这里试试.