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之类的内容将onChange更改为所选颜色getElementById的值其他方法。默认情况下，将选择第一种颜色（蓝色）。

有人对此提出建议吗？欢迎使用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
});

You can try it here.

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

1 个答案: