自定义下拉框

Posted 2021-01-04 charlie098765

1.代码布局

 <div class="select-box">
	<span class="select-value" id ="patrolId" >请选择</span>
	<a class="select-img select-close"></a>
	<div class="option fence">
	    <a>请选择</a>
	</div>
</div>　　

2.custom_select.css

 

.select-box {
	width: 100%;
	float: left;
	border: solid 1px #e6e6e6;
	color: #444;
	position: relative;
	cursor: pointer;
	font-size: 12px;
	height: 30px;
	border-radius:2px;
}

.select-open,
.select-close {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
	height: 100%;
}

.select-open {
	background: url(../images/icon_arrow_up.png) no-repeat center!important;
	background-size: 10px 6px!important;
}

.select-close {
	background: url(../images/icon_arrow_up.png) no-repeat center!important;
	transform: rotate(180deg)!important;
	-ms-transform: rotate(180deg)!important;
	/* IE 9 */
	-moz-transform: rotate(180deg)!important;
	/* Firefox */
	-webkit-transform: rotate(180deg)!important;
	/* Safari 和 Chrome */
	-o-transform: rotate(180deg)!important;
	/* Opera */
	background-size: 10px 6px!important;
}

.select-value {
	display: inline-block;
	padding-left: 10px!important;
	width: 100%;
	line-height:30px;
	height: 30px;
	cursor: text;
	overflow: hidden;
	text-align:left!important;
}

.option {
	width:calc(100% + 2px)!important;
	border: solid 1px #e6e6e6;
	position: absolute;
	top:30px!important;
	z-index: 2;
	left:-1px;
	overflow: hidden;
	display: none;
	box-shadow: 0px 1px 5px gainsboro;
	text-align:center;
	margin-bottom:30px!important;
}

.option a {
	display: block;
	height: 30px;
	line-height: 30px;
	text-align: left;
	padding: 0 10px;
	width: 100%;
	background: #fff;
	color: #444444;
	text-decoration:none
}

.option a:hover {
	background: #00a1e9;
	color: white;
	border: solid 1px #00a1e9;
}

　　3. custom_select.js

$(function() {
	$(".select-box").click(function(event) {
		event.stopPropagation();
		$(this).find(".option").toggle();
		$(this).parent().siblings().find(".option").hide();
		if($(".option").is(":visible")) {
			$(this).find(".select-img").addClass("select-open").removeClass("select-close");
		} else {
			$(this).find(".select-img").addClass("select-close").removeClass("select-open");
		}
	});
/*	$(document).click(function(event) {
		var eo = $(event.target);
		if($(".select-box").is(":visible") && eo.attr("class") != "option" && !eo.parent(".option").length)
			$(‘.option‘).hide();
	});*/

});


function doSelectClick(_cname){
	var cname=‘select-box‘;
	if(!isEmpty(_cname))cname=_cname;
	$("."+cname).click(function(event) {
		event.stopPropagation();
		if($(".select-value").hasClass("disabled"))return;
		$(this).find(".option").toggle();
		$(this).parent().siblings().find(".option").hide();
		if($(this).find(".option").is(":visible")) {
			$(this).find(".select-img").addClass("select-open").removeClass("select-close");
		} else {
			$(this).find(".select-img").addClass("select-close").removeClass("select-open");
		}
	});
	/*$(document).click(function(event) {
		var eo = $(event.target);
		if($("."+cname).is(":visible") && eo.attr("class") != "option" && !eo.parent(".option").length)
			$("."+cname).find(".option").hide();
	});*/
	//赋值给文本框
	$("."+cname).find(".option a").click(function(event) {
		var innerhtml = $(this).text();
		var value=$(this).attr("value");
		$(this).parent().siblings(".select-value").text(innerHtml).attr("value",value);
	});
}

//传入a上一级的id或者class名称
function refreshSelectData(select_class){
	 /*赋值给文本框*/
	$(select_class+" a").click(function(event) {
		var innerHtml = $(this).text();
	    var value=$(this).attr("value");
		$(this).parent().siblings(".select-value").text(innerHtml).attr("value",value);
	});
}

　　4.相关箭头图片