下拉選擇器使用JS和CSS更改DIV的顏色

我需要的是一個簡單的顏色選擇器（最大6-8色），以便用戶可以爲將要輸入日曆的事件選擇一種顏色。下拉選擇器使用JS和CSS更改DIV的顏色

我測試了幾個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或原始JS建議！

感謝您的幫助！

來源

2011-04-05 pepe

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

來源

2011-04-05 17:07:47 karim79

非常感謝把這個在一起 - 這是一個很不錯的小片代碼 – pepe 2011-04-05 20:02:58

@torr的 - 歡迎您:) – karim79 2011-04-05 20:07:01

OK，你給了一個偉大的答案，但你可以請你只添加關於如何爲每個訪問者記住這個選擇的信息？我實際上喜歡用戶能夠改變多個div的背景顏色，但是這樣就可以在整個博客中記住顏色，即當他們打開另一個帖子或頁面時不需要改變顏色。你能幫忙嗎？謝謝。 – rlesko 2011-12-22 21:13:01

下拉選擇器使用JS和CSS更改DIV的顏色

回答

相關問題