javascript - Dropdown selector to change color of DIV using JS and CSS - Stack Overflow

admin管理员组

文章数量:1429500

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 plex (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 wele!

Thanks for helping!

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 plex (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 wele!

Thanks for helping!

• javascript
• jquery
• css
• drop-down-menu

Share Improve this question Follow asked Apr 5, 2011 at 17:05 pepepepe 9,9092525 gold badges117117 silver badges192192 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptDropdown selector to change color of DIV using JS and CSSStack Overflow