Select美化效果，运用jQuery插件

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select美化-download by http://www.zzzyk.com</title>
<style type="text/css">
body{ background-color: #cfdfef; FONT: 12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif}
a{ text-decoration:none;outline:none;hide-focus:expression(this.hideFocus=true);}
.selectBox{width:100px}
.selectBox a{
display:block; background:url(http://www.zzzyk.com/jscss/demoimg/201110/selectBG.gif) left top;padding-left:10px; color:#79a2bd;
line-height:24px!important;line-height:26px;height:24px; overflow:hidden;
}
.selectBox a:hover{background-position:left -24px}
.selectBox a:hover.open,.selectBox a.open{background-position:left -48px}
.selectBox p{
margin:0; padding:0;display:none; position: absolute; width:100px;
background:url(selectBG.gif) left bottom; padding-bottom:6px;
}
.selectBox p a{background-position:left -160px}
.selectBox p a.current{background-position:left -96px; color:#fff}
.selectBox p a:hover{background-position:left -72px; color:#fff}
</style>
<script type="text/javascript" src="http://www.zzzyk.com/ajaxjs/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var newSelect = $("#aa");
	newSelect.click(function(e){
		if(this.className == "open"){
			closeSelect(this);
		}else{
			this.className = "open";
			$(this.nextSibling).slideDown("fast");
		}
		e.stopPropagation();
	});
	
	function closeSelect(obj){
		$(obj.nextSibling).slideUp("fast",function(){
			obj.className = "";
		});
	}
	$(document).bind("click", function() {
	  	closeSelect(newSelect[0]);
	});

	newSelect.next().click(function(e){
		var src = e.target;
		if(src.tagName == "A"){
			var PObj = src.parentNode;
			PObj.previousSibling.innerHTML = src.innerHTML;
			/*var aList = PObj.getElementsByTagName("a");
			for(var i=0;i<aList.length;i++){
				aList[i].className = "";
			}*/
			$(src).siblings().removeClass();
			src.className = "current";
			PObj.nextSibling.value = src.getAttribute("value");
		}
	});
});
</script>
</head>

<body>
<div class="selectBox">
	<a href="javascript:void(0);" id="aa">请选择类别</a><p>
    	<a href="javascript:void(0)" class="current" value="">请选择类别</a>
    	<a href="javascript:void(0)" value="dc">数码相机</a>
        <a href="javascript:void(0)" value="lcd">液晶显示器</a>
        <a href="javascript:void(0)" value="mobile">智能手机</a>
        <a href="javascript:void(0)" value="oven">微波炉</a>
    </p><input type="hidden" name="category" id="category" value="no" />
</div>
<input type="button" onclick="alert($('#category').val());" value="取值" />
</body>
</html>
上一个：jQuery表单验证，无刷新显示提示信息
下一个：变换的下拉选择菜单
更多图片编程知识: