Jq CSSCombox简单选择框实现。通过传入json数据源来设置下拉框的选项，调用ComboxHandler.SelectedItem()函数来获取选择的值。

CSS:

#mainBody {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	margin-top: 30px;
}
.comboxMain {
	float: left;
	margin: 30px 0 0 30px;
	-webkit-box-shadow: 0px 0px 5px #ccc;
	-moz-box-shadow: 0px 0px 5px #ccc;
	box-shadow: 0px 0px 5px #ccc;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	overflow: hidden;
}
.comboxItem {
	margin: 0;
	padding: 0;
	list-style: none;
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	text-align: center;
	border: 1px solid #ccc;
	margin-top: -1px;
	float: left;
	cursor: pointer;
}
.comboxItem:hover {
	background-color: #efefef;
}
.comBoxText {
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	cursor: pointer;
	border: 1px solid #ccc;
	float: left;
	text-align: center;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.comboxMain:hover .comBoxText {
	background-color: #F1F1F1;
}
.comboxItemLast {
	margin: 0;
	padding: 0;
	list-style: none;
	font: 15px "微软雅黑", Arial, Helvetica, sans-serif;
	text-align: center;
	border: 1px solid #ccc;
	margin-top: -1px;
	float: left;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

Html:

                  ComBox

Js:

$(document).ready(function(e) {
    ComboxHandler.Init();
});
var ComboxHandler={
	comboxWidth:200,
	comboxHeight:40,
	comboxItemHeight:80,
	conboxItemShow:false,
	comboxItemArray:["HTML5","CSS3","Javascript","Jquery","PHP","ASP.NET","JSP"],
	comboxItemNorHeight:0,
	Init:function(){
		$(".comboxMain").css("width",ComboxHandler.comboxWidth 2 "px");
		$(".comBoxText").css({
		"width":ComboxHandler.comboxWidth "px",
		"line-height":ComboxHandler.comboxHeight "Px"
		});
		for(var i=0;i<ComboxHandler.comboxItemArray.length;i  ){
			var items=$("" ComboxHandler.comboxItemArray[i] "");
			items.attr("class","comboxItem");
		
			$(".comboxMain").append(items);
		}
		$(".comboxItem").click(function(event){
			event.stopPropagation();
			$(".comBoxText").html($(this).html());
			ComboxHandler.comboxHide($(".comboxMain"));
		});
		$(".comboxItem").css({
		 "width":ComboxHandler.comboxWidth "px",
		 "line-height":ComboxHandler.comboxHeight "px",
		});
		ComboxHandler.comboxItemNorHeight=$(".comboxMain").height();
		$(".comboxMain").css("height",$(".comBoxText").height() 2 "px");
		$(".comBoxText").click(function(){
			ComboxHandler.conboxItemShow==false?ComboxHandler.comboxShow($(this).parent()):ComboxHandler.comboxHide($(this).parent());
		});
		$(document.body).click(
		function(){
			if(ComboxHandler.conboxItemShow==true){
				ComboxHandler.conboxItemShow=false;
				ComboxHandler.comboxHide($(".comboxMain"));
		}
		}
	    );
	},
	comboxShow:function(target){
		$(target).find(".comboxItem").last().css({
			"-webkit-border-radius":"0 0 5px 5px",
	        "-moz-border-radius": "0 0 5px 5px",
	        "border-radius": "0 0 5px 5px"
		});
		$(target).animate({height:ComboxHandler.comboxItemNorHeight "px"},300,function(){ComboxHandler.conboxItemShow=true;});
	},
	comboxHide:function(target){
		$(target).animate({height:$(".comBoxText").height() 2 "px"},300,function(){ComboxHandler.conboxItemShow=false;});
	},
	SelectedItem:function(){
		return $(".comBoxText").html();
	}
}