jquery下拉框

(function($){
    $.fn.extend({
        transform_select:function(setting){
            var defaults = {
                width        :    100,
                height        :    50
            },
            options = $.extend(defaults,setting),
            method = {
                init : function(){
                    var _this = this,
                    op = _this.find('option'),
                    container = $('<div class="transformSelect"></div>'),
                    span = $('<span>'+method.getSelectedOption.call(_this).text()+'</span>');
                    container.append(span);
                    
                    //隐藏该控件
                    _this.hide();
                    _this.after(container);
                    var ul='<ul style="display:none">';
                    op.each(function(){
                        ul = ul + method.getLiHtml.call(this);
                    })
                    ul+='</ul>';
                    container.append(ul);
                    
                    container.find('span').click(method.openSelect);
                    container.find('ul li').click(method.selectVal);
                },
                getLiHtml : function(){
                    var _this = $(this);
                    if(_this.is(':selected')){
                        return '<li class="selected" data-val="'+_this.val()+'">'+_this.text()+'</li>';
                    }else{
                        return '<li data-val="'+_this.val()+'">'+_this.text()+'</li>';
                    }
                },
                getSelectedOption : function(){
                    return this.find('option:selected');
                },
                openSelect : function(){
                    var _this = $(this);
                    var ul = _this.next('ul');
                    if(ul.is(':hidden')){
                        ul.show();
                    }else{
                        ul.hide();
                    }
                },
                selectVal : function(){
                    var _this = $(this),
                    data_val = _this.attr('data-val'),
                    data_text = _this.html(),
                    ul = _this.parent('ul'),
                    span = ul.prev('span'),
                    trigger = ul.parent('div').prev('select');
                    trigger.val(data_val);
                    span.html(data_text);
                    ul.hide();
                }
            }
            
            return  this.each(function(){
                var _this = $(this);
                method.init.call(_this);
                
            })
        }
    })
})(jQuery);

$('.select_list1').transform_select();

$('.select_list2').transform_select();
$('.select_list3').transform_select();

 

/*
var obj = {'name':'zhangsan','email':'123@qq.com'};
for(var key in obj){
    alert(key);
}*/

/*(function($){
    $.fn.extend({
        myAlert:function(options){
            var _this = $(this);
            var s = $.extend({},defaults,options)
            _this.click(function(){
                alert(_this.val());
            })
            
            var init = function(params,trigger){
                o.s = params;
                o.trigger = trigger;
                trigger.css({height:'100'});
            }
            
            init(s,_this);
            for(var key in o.s){
                alert(key +' '+o.s[key]);
            }
            
            o.func();
            return _this;
        }
    });
    
    var o = {
        s : {},
        trigger : null,
        func : function(){
            for(var key in this.s){
                alert(key);
            }
            
            this.trigger.css({width:'500px'});
        }
    }
    
    var defaults = {
        width : 'auto',
        height: 'auto',
        margin: '100'
    }
})(jQuery)


$('#btnClick').myAlert().val('你再点试试');*/


(function($){
    var defaults = {
        width:150,
        height:25,
        padding_lr:10
    }
    
    var o = {
        options : {},
        trigger : null,
        selectdOption : null,
        getOptions : function(){
            if(!this.trigger) return this;
            var selectedOption ={} ;
            selectedOption.value = this.trigger.find('option:selected').val();
            selectedOption.text = this.trigger.find('option:selected').text();
            this.selectedOption = selectedOption;
            var $options = this.trigger.find('option');
            var arrOptions = [];
            $options.each(function(){
                var option = $(this);
                arrOptions.push(option);
            })
            return arrOptions;
        }
    }
    
    $.fn.extend({
        transform_select : function(options){
            var _this = $(this);
            var _s = $.extend({},defaults,options);
            o.options = _s;
            _this.hide();
            
            _this.each(function(){
                var th = $(this);
                o.trigger = $(this);
                var arrOptions = o.getOptions();
                var container = $('<div style="position:relative" class="transform_select"></div>');
                var span = $('<span class="">'+o.selectedOption.text+'</span>');
                var ul = $('<ul></ul>');
                container.append(span).append(ul);
                container.css({width:o.options.width+'px'});
                span.css({width:o.options.width+'px',height:o.options.height+'px','line-height':o.options.height+'px','border':'1px solid #ccc','font-size':'12px','display':'block','padding':'0 '+o.options.padding_lr+'px'});
                ul.css({'border':'1px solid #ccc','border-top':'none',width:o.options.width+o.options.padding_lr*2+'px','position':'absolute','background':'#fff','z-index':'999'});
                $.each(arrOptions,function(i,option){
                    var li = $('<li data-val="'+option.val()+'">'+option.text()+'</li>');
                    li.css({width:o.options.width+'px',height:o.options.height+'px','line-height':o.options.height+'px','font-size':'12px','display':'block','padding':'0 '+o.options.padding_lr+'px'});
                    ul.append(li);
                    li.bind('click',function(){
                        o.trigger.val.call(th,option.val());
                        span.html(option.text());
                        ul.hide();
                        //return false;
                    }).hover(function(){
                        $(this).css({'background':'#eee'});
                    },function(){
                        $(this).css({'background':'#fff'});
                    })
                });
                
                ul.hide();
                o.trigger.after(container);
                
                span.bind('click',function(){
                    if(ul.is(':hidden')){
                        $('.transform_select').find('ul').hide();
                        ul.show();
                    }else{
                        ul.hide();
                    }
                    return false;
                })
                
                $(document).bind('click',function(){
                    $('.transform_select').find('ul').hide();
                })
            })
            
            
            
            
            
            
            
            
            
            
            
            
            return _this;
        }
    })
})(jQuery)


$('.select_list1').transform_select({width:100,height:25,padding_lr:10});
$('.select_list2').transform_select({width:200,height:30,padding_lr:20});
$('.select_list3').transform_select({width:300,height:50,padding_lr:30});

 http://linkagesel.xiaozhong.biz/