select 转换

/**
* 把原始的select转换成div和input的形式。
**/ 
 
(function($){ 
    $.fn.xcySelect = function(options){ 
 
        var defaults = { 
            hiddenInput : null 
            ,showInput  : null 
            ,readonly   : true 
            ,width      : 100 
            ,height     : 40 
            ,dropIcoImg : "" 
            ,className  : "" 
            ,width      : 100 
            ,inputOver  : "" 
            ,inputOut   : "" 
            ,divOver    : "" 
            ,divOut     : "" 
            ,onclick    : null  
        } 
        defaults = $.extend({},defaults, options, {_showDivClass:"",_showInputClass:"selectInput"}); 
 
        $(this).each(function(){ 
            var $objSelect = $(this);  
            if($(this).attr("tagName").toLowerCase() == "select" ){ 
                setInput(defaults,$objSelect); 
            };  
        }); 
    }; 
     
    function setInput(defaults,$objSelect){ 
        defaults['hiddenInput'] =   $(this).attr("name") || defaults['hiddenInput'] || ""; 
        defaults['showInput'] = ($(this).attr("name") || defaults['showInput'] ||   "")+ "_show"; 
        var $hiddenInput = $("<input type = 'hidden' />").attr("name",defaults['hiddenInput']); 
        var $showInput = $("<input readonly type = 'text' />").attr("name",defaults['showInput']).addClass(defaults['_showInputClass']); 
        $showInput.addClass($objSelect.attr("class") || defaults['className'] || ""); 
         
        var selectedOption = $(":selected",$objSelect); 
        if(selectedOption.length = 1){ 
            setDefaultVal(selectedOption, $showInput, $hiddenInput); 
        } 
 
        $showInput.blur(function(){ 
            inputBlur($(this),$hiddenInput); 
        }); 
          
         
        $hiddenInput.insertAfter($objSelect); 
        $showInput.insertAfter($objSelect);  
        setList(defaults, $objSelect, $showInput, $hiddenInput); 
        // 删除页面中select 
        $objSelect.remove(); 
    }; 
 
    function setDefaultVal($selectedOption, $showInput, $hiddenInput){ 
        $showInput.val($selectedOption.text()); 
        $hiddenInput.val($selectedOption.val());  
    }; 
 
    function inputBlur($src, $dest){ 
          $dest.val($src.val()); 
    }; 
     
    function setList(defaults, $objSelect,  $showInput, $hiddenInput){ 
        var $div = $("<div class='selectDiv'></div>").addClass(defaults['_showDivClass']); 
        $div.mouseover(function(){ 
            $showInput.addClass('selectInputOver'); 
        }).mouseout(function(){ 
            $showInput.removeClass('selectInputOver'); 
        }).hover(function(){ 
            $("div.selectDivHover",$div).removeClass("selectDivHover"); 
        },function(){}); 
        // 设置下面的显示屋的width和上面的input一致 
        var width = getElementWidth($showInput); 
        $div.css({'width':width}); 
        $div.data("options",$("option",$objSelect).length); 
  
        $div.data("dir",$objSelect.attr("selectedIndex") || 0); 
        // 
        $("option",$objSelect).each(function(index){ 
            var $optionDiv = $("<div></div>");  
            var $option = $(this); 
            var optionValue = $option.attr("value"); 
            var optionText = $option.text(); 
             
            $optionDiv.data("value",optionValue) 
                      .data("index",index) 
                      .html(optionText); 
            $div.append($optionDiv);  
            liHander(defaults,$optionDiv, $showInput, $hiddenInput, $div); 
        });  
        // 设置div的位置  
        $showInput.after($div); 
 
        $showInput.focus(function(){ 
            fixedPosition($(this),$div); 
            //$div.show(); 
        }).click(function(){ 
            setOptionSelect($("div:eq("+$div.data("dir")+")",$div)); 
        //  alert($div.data("dir")); 
            $div.toggle();  
        }).keydown(function(event){ 
            inputKeyDown($(this),$hiddenInput,event,$div); 
        }); 
        // 默认不显示 
        $div.hide(); 
    }; 
    //  
    function setOptionSelect($div){ 
        $div.addClass("selectDivHover"); 
    } 
 
    function setRemoveOptionSelect($div){ 
        $div.addClass("selectDivHover"); 
    } 
    //键盘事件 
    function inputKeyDown($showInput,$hiddenInput,event,$div){  
      
        $showInput.addClass('selectInputOver'); 
        $div.show(); 
        setOptionSelect($("div:eq("+$div.data("dir")+")",$div)); 
        switch(event.keyCode) { 
            case 38: // up 
                event.preventDefault(); 
                direct('up',$div,$showInput,$hiddenInput); 
                break; 
            case 40: // down 
                event.preventDefault(); 
                direct('down',$div,$showInput,$hiddenInput); 
                break;  
            case 13: 
                event.preventDefault(); 
                $div.hide(); 
                $showInput.removeClass('selectInputOver');  
                break; 
        }  
    }; 
    //  
    function log(message){  
        //$("#show").append(message + "<br/>");  
    }; 
 
    function direct(dir,$div,$showInput,$hiddenInput){   
        var options = $div.data("options"); 
        var dirData = parseInt($div.data("dir")); 
        switch(dir){ 
            case 'up': 
                dirData = Math.abs((dirData + options - 1)%options); 
                $div.data("dir",dirData);  
                break; 
            case 'down': 
                dirData = Math.abs(( dirData + 1 )%options); 
                $div.data("dir",dirData );  
                break; 
        } 
         
        var $selectOption = $("div:eq("+dirData+")",$div); 
        $("div.selectDivHover",$div).each(function(){  
            $(this).removeClass("selectDivHover"); 
        }); 
 
        $selectOption.addClass("selectDivHover"); 
        $hiddenInput.val($selectOption.data("value")); 
        $showInput.val($selectOption.text()); 
        //log("dirData:"+dirData+" dir:" + dir); 
    } 
    function getDefaultValue(attr,defaults,$this, def){  
        return $this.attr(attr) || defaults[attr] || def; 
    } 
 
    function liHander(defaults, $li, $showInput, $hiddenInput, $div){ 
        $li.click(function(){ 
            //defaults.onclik   
            var value = $(this).data("value");       
            $showInput.val($(this).text()); 
            $hiddenInput.val(value); 
            var selectDiv = $(this).parents(".selectDiv"); 
            selectDiv.hide();  
            $div.data("dir",$(this).data("index")); 
        });  
    }; 
 
    function getElementHeight($obj){ 
        var paddingTop = parseInt($obj.css("padding-top")) || 0; 
        var paddingBottom = parseInt($obj.css("padding-bottom")) || 0; 
        var borderTop = parseInt($obj.css("border-top-width")) || 0; 
        var borderBottom = parseInt($obj.css("border-bottom-width")) || 0; 
    //  打印要列表要显示的位置 
    //  alert(paddingTop+" " + paddingBottom+" " + borderTop+" " + borderBottom); 
        return paddingTop+ paddingBottom + borderTop + borderBottom + $obj.height(); 
    }; 
 
    function getElementWidth($obj){ 
        var paddingRigth = parseInt($obj.css("padding-right")) || 0; 
        var paddingLeft = parseInt($obj.css("padding-left")) || 0; 
        var borderRigth = parseInt($obj.css("border-right-width")) || 0; 
        var borderLeft = parseInt($obj.css("border-left-width")) || 0; 
    //  打印要列表要显示的位置 
        return paddingRigth+ paddingLeft + borderRigth + borderLeft + $obj.width(); 
    }; 
 
    function fixedPosition($dest, $div){  
        var showInputOffset = $dest.offset(); 
        var selectDivLeft = showInputOffset.left; 
        var showInputHeight = getElementHeight($dest);  
        var selectDivTop = showInputOffset.top + showInputHeight; 
        $div.css({"top":selectDivTop 
            ,"left":selectDivLeft 
        });  
    }; 
      
})(jQuery); 

摘自 longnihao的专栏