<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>Pick a Color</h1> <table> <tr> <td style="padding-right:5px;"> <div id="preview" class="swatch" style="background-color:#fff" ></div> </td> <td> <input class="color-field" value="White" style="display:none;"> <div class="dropdown"> <a class="dropdown-toggle btn btn-default btn-color" data-toggle="dropdown" href="#"><span id="color-name">White</span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <table> <tr> <td><div id="Red" class="swatch swatch-clickable" style="background-color:#d11600"></div></td> <td><div id="Orange" class="swatch swatch-clickable" style="background-color:#f96302"></div></td> <td><div id="Banana" class="swatch swatch-clickable" style="background-color:#ffed38"></div></td> <td><div id="Lemon" class="swatch swatch-clickable" style="background-color:#e5e111"></div></td> <td><div id="Lime" class="swatch swatch-clickable" style="background-color:#cee007"></div></td> <td><div id="Evergreen" class="swatch swatch-clickable" style="background-color:#339e35"></div></td> </tr><tr> <td><div id="Lunar Blue" class="swatch swatch-clickable" style="background-color:#60afdd"></div></td> <td><div id="Grape" class="swatch swatch-clickable" style="background-color:#9b4f96"></div></td> <td><div id="Hot Pink" class="swatch swatch-clickable" style="background-color:#fc0093"></div></td> <td><div id="Sagebrush" class="swatch swatch-clickable" style="background-color:#c6c699"></div></td> <td><div id="Tan" class="swatch swatch-clickable" style="background-color:tan"></div></td> <td><div id="White" class="swatch swatch-clickable" style="background-color:white"></div></td> </tr> </table> </table> </ul> </div> </td> </table> </div>

.container { padding-top:50px; } .swatch { width:70px; height:70px; border-radius:5px; border: 2px solid #666; } .swatch-clickable:hover { border: 2px solid #000; cursor: pointer; } .dropdown-menu { padding:10px; }

$(function() { $(".swatch swatch-clickable").click(function() { var colorName = $(this).attr('id'); var colorHex = $(this).css('background-color'); $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selHTML+'<span class="caret"></span>'); $(".btn-color").css('background-color', colorHex); }); });