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

Dropdown selector to change color of DIV using JS and CSS

本文关键字：改变 CSS DIV 颜色 JS 选择器      更新时间：2023-09-26

我需要的是一个简单的颜色选择器(最多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，并通过getElementById或其他方法将其background-color更改为所选颜色onChange的值。默认情况下，第一种颜色将被选择(蓝色)。

有人有什么建议吗?欢迎提出jQuery或raw JS建议!

谢谢你的帮助!

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

你可以在这里试试

相关文章：