用 jQuery 制作模拟下拉框，改变你的下拉框样式

用 jQuery 制作模拟下拉框
传统的 Select 下拉框因为样式丑陋且无法随性更改样式而遭到了我的鄙夷，相信很多人都有此种观点。并且在ie6下，下拉框的优先级大于层，经常导致下拉框显示在层的上面。但是自从有了 Javascript，这些问题便不再是问题。最近正好在改版一个网站，要修改下拉框的样式，正好看到 CssRain 已经制作了这么一个很有用的插件，下面我就教大家怎么用 jQuery 制作一个模拟下拉框，从而实现对 Select 下拉框样式的定制。

思路：
通过已知的下拉框，把里面的数据循环出来，放到另一个div的ul列表里，
另一个div就是简单的弹出层而已。
通过hidden可以获取下拉框的选中的值和文本。

先看这段代码：

<script type="text/javascript">
/* 
Dev by CssRain.cn 
Test in IE6,IE7,Firefox3,Chrome
感谢 CssRain的这段插件代码
*/
jQuery.fn.CRselectBox = jQuery.fn.sBox = function(options){
	options = $.extend({
		animated : false
	},options);
	var _self = this;
	/*构建结构*/
	var _parent = _self.parent();
	var wrapHtml = '<div class="CRselectBox"></div>';
	var $wrapHtml = $(wrapHtml).appendTo(_parent);
	var selectedOptionValue = _self.find("option:selected").attr("value");
	var selectedOptionTxt = _self.find("option:selected").text();
	var name = _self.attr("name");
	var id = _self.attr("id");
	var inputHtml = '<input type="hidden" value="'+selectedOptionValue+'" name="'+name+'" id="'+id+'"/>';
	$(inputHtml).appendTo($wrapHtml);
	var inputTxtHtml = '<input type="hidden" value="'+selectedOptionTxt+'" name="'+name+'_CRtext" id="'+id+'_CRtext"/>';
	$(inputTxtHtml).appendTo($wrapHtml);
	var aHtml = '<a class="CRselectValue" href="#">'+selectedOptionTxt+'</a>';
	$(aHtml).appendTo($wrapHtml);
	var ulHtml = '<ul class="CRselectBoxOptions"></ul>';
	var $ulHtml = $(ulHtml).appendTo($wrapHtml);
	var liHtml = "";
	_self.find("option").each(function(){
		if($(this).attr("selected")){
			liHtml += '<li class="CRselectBoxItem"><a href="#" class="selected" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
		}else{
			liHtml += '<li class="CRselectBoxItem"><a href="#" rel="'+$(this).attr("value")+'">'+$(this).text()+'</a></li>';
		}
	});
	$(liHtml).appendTo($ulHtml);
	/*添加效果*/
	$( $wrapHtml, _parent).hover(function(){
		$(this).addClass("CRselectBoxHover");
	},function(){
		$(this).removeClass("CRselectBoxHover");
	});
	$(".CRselectValue",$wrapHtml).click(function(){
		$(this).blur();	
		if( $(".CRselectBoxOptions",$wrapHtml).is(":hidden") ){
			if(options.animated){
				$(".CRselectBoxOptions").slideUp("fast");
				$(".CRselectBoxOptions",$wrapHtml).slideDown("fast");
			}else{
				$(".CRselectBoxOptions").hide();
				$(".CRselectBoxOptions",$wrapHtml).show();
			}
		}
		return false;
	});
	$(".CRselectBoxItem a",$wrapHtml).click(function(){
		$(this).blur();
		var value = $(this).attr("rel");
		var txt = $(this).text();
		$("#"+id).val(value);
		$("#"+id+"_CRtext").val(txt);
		$(".CRselectValue",$wrapHtml).text(txt);
		$(".CRselectBoxItem a",$wrapHtml).removeClass("selected");
		$(this).addClass("selected");
		if(options.animated){
			$(".CRselectBoxOptions",$wrapHtml).slideUp("fast");
		}else{
			$(".CRselectBoxOptions",$wrapHtml).hide();
		}
		return false;
	});
	$(document).click(function(event){
		if( $(event.target).attr("class") != "CRselectBox" ){
			if(options.animated){
			$(".CRselectBoxOptions",$wrapHtml).slideUp("fast");
			}else{
				$(".CRselectBoxOptions",$wrapHtml).hide();
			}
		}
	});
	_self.remove();
	return _self;
}
 
})
</script>

当然既然是 jQuery 实现的，自然别忘了载入 jQuery 的库哦！
-Via

至于怎么用呢，看下面这段代码：

<script type="text/javascript">
$(function(){
	$("#abc").CRselectBox();      //#abc 为你的下拉框select的ID
</script>

只要给你的下拉框 Select 一个 ID 值即可，其余的就交给上述的 jQuery 插件了。

CSS部分自行定义：

.CRselectBox {}
.CRselectBoxHover {}
.CRselectBox a.CRselectValue {}
.CRselectBoxOptions {}
.CRselectBoxOptions a{}
.CRselectBoxOptions a:hover{}
.CRselectBoxOptions a.selected{}
/* 解决 firefox 点击放大出现虚线框，从而导致滚动条的问题  */
.CRselectBox a { 
	outline: none; 
	text-decoration:none;
}
.CRselectBox a:focus { 
	outline: none; 
	text-decoration:none;
}