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);