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

发布于 2024-10-30 17:15:03 字数 900 浏览 1 评论 0原文

我需要的是一个简单的颜色选择器（最多 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 的值，通过类似 < code>getElementById 或其他方法。默认情况下，将选择第一种颜色（蓝色）。

有人对此有什么建议吗？欢迎 jQuery 或原始 JS 建议！

感谢您的帮助！

原文

What I need is a simple color picker (max 6-8 color) so the user can choose a color for an event that will be entered in a calendar.

I have tested several jQuery colopicker plugins and none have worked well in my project.

Either they are too complex (like Farbtastic) or are simple but don't run on the most recent version of jQuery.

So I decided to provide a good ol' dropdown menu with a list of colors

<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>

This works well. But I would like to give the user some feedback on the color they choose, before submitting the form.

I wonder if somehow we could create a small square DIV next to the dropdown, and have its background-color change to the value of the selected color onChange, via something like getElementById or other method. By default, the first color would be selected (Blue).

Anyone have suggestions for this? jQuery or raw JS suggestions are welcome!

Thanks for helping!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吹泡泡o 2024-11-06 17:15:03

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

您可以在这里尝试。

$(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.

回复收藏 0 原文

~没有更多了~