Short Color Selector : Demo

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