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.相关箭头图片