仿Select实现带图标的下拉框

效果图

html

css

.jqcs_container{
	width:100%;
	display:inline-block;
}
.jqcs_select{
	position:relative;
	border:1px #b1b1b1 solid;
	cursor:pointer;
	overflow:hidden; /*解决因浮动元素导致的坍塌问题*/
	color:#555;
}
.jqcs_select:hover{
	background-color:#f9f9f9;
}
.jqcs_select .jqcs_value{
	float:left;
	padding:5px 5px; /*上下、左右*/
}
.jqcs_select .jqcs_value p.jqcs_placeholder{
	margin:0;
	padding:4px 0px;
}
.jqcs_select .jqcs_arrow{
	position:absolute;
	right:0;
	height:100%;
	border-left:1px #b1b1b1 solid;
	background-image: url(../images/arrow_down.png); /*高仿select右侧的箭头小图标*/
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center center; /*水平、垂直居中显示*/
}
.jqcs_select .jqcs_arrow.rotated{ /*箭头的转向：向上*/
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	border-left:0 !important; 
	border-right:1px #b1b1b1 solid !important;
}
.jqcs_options{
	display:none; /*一开始是隐藏的*/
	border:1px #b1b1b1 solid; 
	border-top:0;
}
.jqcs_option{
	cursor:pointer; /*鼠标悬停在选项上时，变成小手*/
}
.jqcs_option:hover{
	background-color:#f9f9f9;
}

js

;(function( $ ){
	$.customSelect = function(options){
		/*如果没有指定下拉框的标识符，则随机生成*/
		if(typeof options.identifier === "undefined" || options.identifier == ""){
			options.identifier = Math.floor((Math.random() * 100000000));
		}
	
		/*在input标签后生成用于模拟select的div*/
		$(options.basePoint).after(
			"
"+
				/*高仿select的header部分*/
				"
"+ /*通过配置headerCssClass参数给header部分设置样式*/
					"
"+options.placeholder+"
"+
					"
"+ /*右侧的小箭头图标*/
				"
"+
				/*高仿select的下拉选项部分（容器，用于存放所有下拉选项）*/
				"
"+
			"
"

		);

		
		/*将小箭头的宽度设置为下拉框的高度*/
		$('#jqcs_s_'+options.identifier+' .jqcs_arrow').width($('#jqcs_s_'+options.identifier).height());
		
		/*处理用户配置的数据源*/
		for(var i = 0; i < options.dataSource.length; i++){
			var currenthtml = $('#jqcs_o_'+options.identifier).html();
			var template = options.template; /*每一个下拉选项*/
			
			/*将数据源中的数据填到下拉选项的占位符中*/
			for(var j = 0; j < options.dataSource[i].length; j++){
				var regex = new RegExp("\\$"+j, "g");
				template = template.replace(regex, options.dataSource[i][j]);
			}

			// 追加template							
			$('#jqcs_o_'+options.identifier).html(currenthtml + template);
		}

		
		/*点击下拉框时，显示or隐藏，小箭头的变化*/
		$('#jqcs_s_'+options.identifier).click(function(e){
			e.stopPropagation(); // 阻止事件冒泡
			if($('#jqcs_o_'+options.identifier).css('display') == "block"){
				$('#jqcs_o_'+options.identifier).slideUp();
				$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).removeClass('rotated');
			}else{
				$('#jqcs_o_'+options.identifier).slideDown();
				$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).addClass('rotated');
			}
		});
		
		/*点击选项后，把选项的内容显示在select框中*/
		$('#jqcs_o_'+options.identifier+' .jqcs_option').click(function(e){
			/*input#basePoint*/
			$('input'+options.basePoint)[0].value = $(this).data('select-value');
			$($('#jqcs_s_'+options.identifier+' .jqcs_value')[0]).html(this.outerHTML);
		});
		
		/*点击背景，收缩下拉框*/
		$(window).click(function(e){
			$('#jqcs_o_'+options.identifier).slideUp();
			$($('#jqcs_s_'+options.identifier+' .jqcs_arrow')[0]).removeClass('rotated');
		});
	}
})( jQuery );

完整Demo

https://gitee.com/lanying100/CustomSelect

参考网址

JQuery之家：http://www.htmleaf.com/jQuery/Form/201808255296.html

Github：https://github.com/jsanahuja/jquery.customSelect