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

我需要的是一个简单的颜色选择器（最大6-8色），以便用户可以为将要输入日历的事件选择一种颜色。下拉选择器使用JS和CSS更改DIV的颜色

我测试了几个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，并通过类似getElementById或其他方法将其background-color更改为所选颜色onChange的值。默认情况下，第一种颜色将被选中（蓝色）。

任何人对此有何建议？欢迎jQuery或原始JS建议！

感谢您的帮助！

来源

2011-04-05 pepe

$(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 
});

You can try it here.

来源

2011-04-05 17:07:47 karim79

非常感谢把这个在一起 - 这是一个很不错的小片代码 – pepe 2011-04-05 20:02:58

@torr的 - 欢迎您:) – karim79 2011-04-05 20:07:01

OK，你给了一个伟大的答案，但你可以请你只添加关于如何为每个访问者记住这个选择的信息？我实际上喜欢用户能够改变多个div的背景颜色，但是这样就可以在整个博客中记住颜色，即当他们打开另一个帖子或页面时不需要改变颜色。你能帮忙吗？谢谢。 – rlesko 2011-12-22 21:13:01

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

回答

相关问题