仿select下拉选择框

ul,
li {
	list-style: none
}

.select_contain {
	font-size: 14px;
	color: #333;
	line-height: 38px;
}

.select_item {
	position: relative;
}

.select_tit {
	margin-right: 20px;
}

.select_result {
	width: 70px;
	line-height: 38px;
	border: 1px solid #ccc;
	text-align: center;
	border-radius: 4px;
	text-indent: -8px;
}

.select_result .triangle {
	border: 5px solid transparent;
	border-top: 5px solid #666;
	position: absolute;
	top: 16px;
	right: 8px;
}

.select_item ul {
	display: none;
	position: absolute;
	width: 70px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0 0 4px 4px;
	border-top-color: #f3f3f3;
	margin-top: -4px;
	padding: 0px;
}

.select_item ul li {
	text-align: center;
}

.select_item ul li:hover {
	background: #eee;
	color: #fff;
}
		
<div class="select_contain">
	<div class="select_item clearfix">
		<div class="select_module_con">
			<div class="select_result">
				<span>本月</span>
				<div class="triangle"></div>
			</div>
			<ul>
				<li>本月</li>
				<li>上月</li>
			</ul>
		</div>
	</div>
</div>
			
			
$(function () {
	$(document).click(function () {
		$(".select_module_con ul").slideUp();
	})
	var module = $(".select_result");
	module.click(function (e) {
		e.stopPropagation();
		var ul = $(this).next();
		ul.stop().slideToggle();
		ul.children().click(function (e) {
			e.stopPropagation();
			$(this).parent().prev().children("span").text($(this).text());
			ul.stop().slideUp();
			console.log($(this).text(), "----选择其值")
		})
	})
})