jQuery 选择颜色RGB值 获得相对应的颜色小方块

Question

如下图效果 选择dropdownlist控件不同的ＲＧＢ值得到对应不同的颜色小方块 ?请大侠们帮忙看看 
ｃｓｓ样式定义：
.colorpicker-picker-span{
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    border: 1px solid #000;
    margin-right: 2px;
    cursor: pointer;
}.colorpicker-picker-info{
    padding: 0 0 2px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}.colorpicker-picker-span:hover {
    border: 1px solid #fff;
}.colorpicker-picker-span.active {
    border: 1px solid #fff;
}.colorpicker-picker {
    background-color: #353534;
    padding: 5px;
    display: none;
    position: absolute;
    top: 0;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #111;
    -moz-box-shadow: 2px 2px 5px #111;
    -webkit-box-shadow: 2px 2px 5px #111;
}.colorpicker-trigger {
    display: block;
    width: 15px;
    height: 15px;
    float: left;
    border: 1px solid #000;
    cursor: pointer;
    background-color: #808080;;
}
.colorpicker-wrap {
    font-family: 'Trebuchet MS', Verdana, Arial, Geneva, sans-serif
}.colorpicker-label {
    float: left;
    margin-right: 2px;
}ｊｓ定义：
(function($) {
    $.fn.extend({
        colorpicker: function(options) {            //Settings list and the default values
            var defaults = {
                label: '',
                size: 20,
                count: 6,
                hide: true
            };            var options = $.extend(defaults, options);
            var obj;
            var colors = {};            var wrap = $('<div class="colorpicker-wrap"></div>');
            var label = $('<div class="colorpicker-label"></div>');
            var trigger = $('<div class="colorpicker-trigger"></div>');
            var picker = $('<div style="width: ' + (options.size + 4) * options.count + 'px" class="colorpicker-picker"></div>');
            var info = $('<div class="colorpicker-picker-info"></div>');
            var clear = $('<div style="clear:both;"></div>');            return this.each(function() {
                obj = this;                //build an array of colors
                $(obj).children('option').each(function(i, elm) {
                    colors[i] = {};
                    colors[i].color = $(elm).text();
                    colors[i].value = $(elm).val();
                });
                create_wrap();
                if (options.label != '')
                    create_label();
                create_trigger();
                create_picker();
                wrap.append(label);
                wrap.append(trigger);
                wrap.append(picker);
                wrap.append(clear);
                $(obj).after(wrap);
                if (options.hide)
                    $(obj).css({
                        position: 'absolute',
                        left: -10000
                    });
            });
            function create_wrap() {
                wrap.mouseleave(function() {
                    picker.fadeOut('slow');
                });
            }            function create_label() {
                label.text(options.label);
                label.click(function() {
                    trigger.click()
                });
            }            function create_trigger() {
                trigger.click(function() {
                    var offset = $(this).position();
                    var top = offset.top;
                    var left = offset.left + $(this).width() + 5;
                    $(picker).css({
                        'top': top,
                        'left': left
                    }).fadeIn('slow');
                });
            }            function create_picker() {
                picker.append(info);
                for (var i in colors) {
                    picker.append('<span class="colorpicker-picker-span ' + (colors[i].color == $(obj).children(":selected").text() ? ' active' : '') + '" rel="' + colors[i].value + '" style="background-color: #' + colors[i].color + '; width: ' + options.size + 'px; height: ' + options.size + 'px;"></span>');
                }
                trigger.css('background-color', '#'+$(obj).children(":selected").text());
                info.text('#'+$(obj).children(":selected").text());
                picker.children(".colorpicker-picker-span").hover(function() {
                    info.text('#' + $(this).attr('rel'));
                }, function() {
                    info.text('#' + picker.children('.colorpicker-picker-span.active').attr('rel'));
                });
                picker.delegate(".colorpicker-picker-span", "click", function() {
                    info.text('#' + $(this).attr('rel'));
                    $(obj).val($(this).attr('rel'));
                    $(obj).change();
                    picker.children('.colorpicker-picker-span.active').removeClass('active');
                    $(this).addClass('active');
                    trigger.css('background-color', $(this).css('background-color'));
                });
                $(obj).after(picker);
            }
        }
    });
})(jQuery);源文件：
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="jquery.colorpicker.css" type="text/css" media="screen"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.colorpicker.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#picker').colorpicker({
                size: 20,
                label: 'Color: ',
                hide: false
            });
        });
 
    </script>
</head>
<body>
<select id="picker">
    <option value="FFFFFF">FFFFFF</option>
    <option value="FFDFDF">FFDFDF</option>
    <option value="FFBFBF">FFBFBF</option>
    <option value="FF9F9F">FF9F9F</option>
    <option value="FF7F7F">FF7F7F</option>
    <option value="FF5F5F">FF5F5F</option>
    <option value="FF3F3F">FF3F3F</option>
    <option value="FF1F1F">FF1F1F</option>
    <option value="FF0000">FF0000</option>
    <option value="DF1F00">DF1F00</option>
    <option value="C33B00">C33B00</option>
    <option value="A75700">A75700</option>
    <option value="8B7300">8B7300</option>
    <option value="6F8F00">6F8F00</option>
    <option value="53AB00">53AB00</option>
    <option value="37C700">37C700</option>
    <option value="1BE300">1BE300</option>
    <option value="00FF00" selected="selected">00FF00</option>
    <option value="00DF1F">00DF1F</option>
    <option value="00C33B">00C33B</option>
    <option value="00A757">00A757</option>
    <option value="008B73">008B73</option>
    <option value="006F8F">006F8F</option>
    <option value="0053AB">0053AB</option>
    <option value="0037C7">0037C7</option>
    <option value="001BE3">001BE3</option>
    <option value="0000FF">0000FF</option>
    <option value="0000df">0000df</option>
    <option value="0000c3">0000c3</option>
    <option value="0000a7">0000a7</option>
    <option value="00008b">00008b</option>
    <option value="00006f">00006f</option>
    <option value="000053">000053</option>
    <option value="000037">000037</option>
    <option value="00001b">00001b</option>
    <option value="000000">000000</option>
</select>
</body>
</html>

Answer 1

JS CODE：$(function(){
     $('#selectColor').change(function(){
          $('#box').css('background-color','#'+$(this).val());
     });
});HTML CODE:
<select id="selectColor">
                     <option value="FFFFFF">FFFFFF</option>
                    <option value="FFDFDF">FFDFDF</option>
                    <option value="FFBFBF">FFBFBF</option>
                    <option value="FF9F9F">FF9F9F</option>
                    <option value="FF7F7F">FF7F7F</option>
                    <option value="FF5F5F">FF5F5F</option>
                    <option value="00FF00" selected="selected">00FF00</option>
              </select>              <div id="box">
                    
              </div>
CSS CODE:#box{width:20px;height:20px;background-color: red;}