Блог

Что мне нужно, так это простое средство выбора цвета (максимум 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 приветствуются!

Спасибо за помощь!

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

Вы можете попробовать это здесь.