jq插件又来了，模拟select下拉框，支持上下方向键哦

好久没来了，更新下插件，

这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的，可是设置默认选项，回调等参数，代码不多，比较简单，吼吼

(function($){    

    //模拟下拉框
    $.fn.htmlSelect = function(opt){
        if($(this).length==0) return false;
        var opts = $.extend({
            defaultsItem : 0,    //默认选中的select项
            saveInput : '<input type= "hidden" />',
            showSelect : '.show',
            callback : function(){} //选择完毕后触发回调
        },opt);

        function SimulateSelect(o){
            this.o = o;
            this.defaultsItem = opts['defaultsItem'];
            this.saveInput = opts['saveInput'];
            this.callback = opts['callback'];
            this.showSelect = this.o.find(opts['showSelect']);
            this.hideInp = null;
            this.selList = this.o.find('ul');
            this.curItem = this. defaultsItem;   //当前选中

        }

        SimulateSelect.prototype = {
            init : function(){
                var _this = this;
                _this.creatInput().changeValue().toogleSelList().keyboard();


                $(document).on("click", function() {       //点击文档空白处 下拉框消失     
                    if(_this.o.hasClass("open")){                 
                        _this.closeSelect(_this.o);
                    }
                }); 
                return this;
            },
            creatInput : function(){
                var _this = this;
                if($.type(_this.saveInput) == "string"){    //判断若参数为jq对象，则直接指向这个input对象，若为字符串，则插入dom
                    this.o.append(_this.saveInput);
                    _this.hideInp = this.o.find('input:hidden');
                }else{
                    _this.hideInp = _this.saveInput
                } 
                if($.type(_this.defaultsItem) == 'number'){
                    _this.curItem = _this.selList.find('li').eq(_this.defaultsItem);
                }
                
                return this;
            },

            changeValue : function(){
                var _this = this;
                
                _this.curItem.addClass('selected').siblings().removeClass();

                var v = _this.curItem.attr('date-value'),s = _this.curItem.html();

                _this.showSelect.html(s);  
                _this.hideInp.val(v);

                return this;
            },

            toogleSelList : function(){                    //展开收起列表
                var _this = this;

                this.o.on('click',function(e){
                    if($(this).hasClass("open")){
                    
                        _this.closeSelect($(this));
                    }else{  
                        
                        $(this).addClass('open');                   
                        _this.selList.show();
                    }

                    var src = e.target,s = '';

                    if(src.tagName.toLowerCase() == "li"){
                        s = src.innerHTML;
                        _this.showSelect.html(s);          
                        $(src).addClass('selected').siblings().removeClass();
                        var v = $(src).attr("date-value");
                        _this.hideInp.val(v);
                        _this.curItem = $(src);

                        if(_this.callback){
                            _this.callback(v);
                        }
                    }
                    
                    e.stopPropagation();
                })

                return this;
            },

            closeSelect : function(obj){
                this.selList.hide(); 
                obj.removeClass('open');

                return this;
            },

            keyboard : function(){       //注册键盘事件
                var _this = this;
                $('body').on('keydown',function(e){    //这块要用body，不然不兼容ie7,8
                    switch(e.keyCode) {
                        case 38:                           
                            _this.prevItem();
                            break;

                        case 40:
                            _this.nextItem();
                            break;                            
                        defaults: 
                        return;
                    }
                })
            },
            prevItem :function(){
                var _this = this;
                if(_this.o.hasClass('open')){
                    if(_this.curItem.prev().length > 0){
                        _this.curItem = _this.curItem.prev();
                        _this.changeValue();
                    }
                }
                return this;

            },

            nextItem :function(){
                var _this = this;
                if(_this.o.hasClass('open')){
                    if(_this.curItem.next().length > 0){
                        _this.curItem = _this.curItem.next();
                        _this.changeValue();
                    }

                }
                return this;

            }

        }



        return this.each(function () {
            var $this = $(this);
            var obj = new SimulateSelect($this);
            obj.init()
        });

    }
})(jQuery)

css

.select{ position: relative; padding-right: 20px; }
.select .ico2{position: absolute; display: block; right: 0; top:10px;cursor: pointer;}
.select .show{color:#333333; height: 40px; line-height: 40px; min-width: 80px;*margin-top:-10px; text-align: center; font-size: 14px; display: block;padding-left: 10px; cursor: pointer;}
.dropList{ max-height: 510px; overflow: auto; position: absolute; top:40px; width: 100%; left: -1px; background: #FFF; z-index: 99; padding-top: 5px; padding-bottom: 2px; display: none;}
.dropList li{ line-height: 30px;margin:0 3px; padding-left: 10px; cursor: pointer;}
.dropList li:hover{color:#333;}
.dropList li.selected{background: #b9b9b9; color:#FFF;}

html：

<div class="select ">
   <span class='show'>中国(+86)</span>

   <ul class="dropList bd">
       <li class='selected' date-value = '0'>中国(+86)</li>
       <li date-value = '11'>美国(+1)</li>
       <li date-value = '3'>澳大利亚(+61)</li>
       <li  date-value = '4'>台湾(+668)</li>
       <li  date-value = '5'>美国(+1))</li>
   </ul>

</div>

　　

调用

$(function(){

    $('#phone').htmlSelect({
        callback:function(i){ }  //i为当前选中的 data-value的值           
        
    })
})