Démo de l'affichage de quelques couleurs.
HTML:
<select name="mySelect" id="mySelect"> <option value="1" data-color="#D6C476" data-title="Marron clair">Color #1</option> <option value="3" data-color="#FBEAA5" data-title="Jaune">Color #3</option> <option value="2" data-color="#594C2D" data-title="Café">Color #2</option> <option value="4" data-color="#EB9656" data-title="Rose">Color #4</option> </select> <select name="mySelect_pink" id="mySelect_pink"> <option value="1" data-color="#d6d8d7" data-title="">dcdcdc</option> <option value="2" data-color="#c9b4b1" data-title="">c9b4b1</option> <option value="3" data-color="#c386a5" data-title="">c386a5</option> <option value="4" data-color="#cf58be" data-title="">cf58be</option> <option value="5" data-color="#a83fcf" data-title="">a83fcf</option> <option value="6" data-color="#733bb6" data-title="">733bb6</option> <option value="7" data-color="#3e2b7a" data-title="">3e2b7a</option> <option value="8" data-color="#2d274d" data-title="">2d274d</option> </select>JS :
$(function() { new ColorSelector({ selectId: 'mySelect', cellWidth: '40px', selectionChar: '✓', hideSelect: false, updateCallback: function(selectObject){alert("color value : "+selectObject.val() );} }).draw(); new ColorSelector({ selectId: 'mySelect_pink', cellWidth: '25px', selectionChar: '★', hideSelect: true }).draw(); });