セレクトボックスを選択しやすくするjQueryのプラグイン

selectErea.js

(function($) {
    $.fn.selectErea = function(config){
        config = $.extend({
            selectEreaId: 'selectErea',
            baseLayerId: 'baseLayer',
            prefix: '__op_',
            brClass: 'br',
            groupClass: 'group',
            headClass: 'head',
            height: 'auto',
            width: 'auto',
            padding: '10px 0',
            textAlign: 'left',
            bgColor: '#D9E1FF',
            whiteSpace: 'nowrap',
            margin: '0px 10px',
            borderRight: 'dashed 1px #000000',
            showSpeed: '',
            fadeSpeed: '0.1',
            Opacity: 0.9
        },config);

        var target = this;
        var selectEreaId = config.selectEreaId;
        var baseLayerId = config.baseLayerId;

        var clear = function(event){
            event.data.selectBox.show();
            $('#'+baseLayerId).remove();
            $('#'+selectEreaId).remove();
            $(document).unbind('clearEvent');
        }
        var select = function(event){
            target[0].selectedIndex = this.id.substr(config.prefix.length);
        }
        var disp = function(event){
            // セレクトエリアの位置決め
            var offset = target.offset(),
                left = offset.left,
                top = offset.top - target.height() + 15;

            // セレクトボックスを使用不可にする
            target.hide();

            /* 画面全体にセレクトエリアを削除するためのレイヤを作成 */
            $('body').append('<div id="' + baseLayerId + '"></div>');
            var bLayer = $('#'+baseLayerId);
            bLayer
                .css( {
                    height: $(document).height(),
                    width: $(document).width(),
                    position: 'absolute',
                    left: '0',
                    top: '0'
                });

            /* セレクトエリアを作成 */
            $('body').append(event.data.layer);
            var sErea = $('#'+selectEreaId);
            sErea
                .hide()
                .css({position: 'absolute'})
                .css({top:             top,
                      left:            left,
                      height:          config.height,
                      width:           config.width,
                      padding:         config.padding,
                      textAlign:       config.textAlign,
                      backgroundColor: config.bgColor});
            $('table', sErea)
                .css({whiteSpace: config.whiteSpace});
            $('a', sErea)
                .bind('click', {selectErea:self}, select)
                .css({margin: '0px 10px'});
            $('td.head', sErea)
                .css({borderRight: 'dashed 1px #000000'});
            sErea
                .show(config.showSpeed)
                .fadeTo(config.fadeSpeed, config.Opacity);

            /* レイヤを削除するイベントの割り当て */
            $(document).bind('clearEvent', {selectBox:target}, clear);
            bLayer.click( function(){ $(document).trigger('clearEvent') });
            $('a', sErea).click( function(){ $(document).trigger('clearEvent') });
        }

        var list = ['<div id="', selectEreaId, '" style="display:none" ><table>'];
        $('option', target).each( function(index){
            if( $(this).attr('class') == config.groupClass ){
                list.push('<td class="');
                list.push(config.headClass);
                list.push('">');
            } else {
                list.push('<td>');
            }
            list.push('<a href="javascript:void(0);" id="');
            list.push(config.prefix + index);
            list.push('">');
            list.push($(this).text());
            list.push('</a></td>');
            if( $(this).attr('class') == config.brClass ){
                list.push('</tr><tr>');
            }
        });
        list.push('</table></div>');

        target.bind('mousedown', {layer:list.join('')}, disp);
    };
})(jQuery);