再客户端,如果使用select ,当拖动客户端的时候,就会导致option脱离select 。所以我们要使用div代替select:
直接上代码:
<div class="selectBox">
<span id="inptSelect" class="seal-select">请选择</span>
<span class="ww_btn_Dropdown_arrow "></span>
<div class="optionDiv">
<ul>
<li>初始护照</li>
<li>初级护照</li>
<li>中级护照</li>
<li>高级护照</li>
</ul>
</div>
</div>
css
.selectBox {
float: left;
margin-top: 5px;
position: relative;
display: flex;
width: 40%;
max-width: 177px;
}
.ww_btn_Dropdown_arrow {
width: 0;
height: 0;
border-width: 5px 4px;
border-color: #828282 transparent transparent;
border-style: solid;
display: block;
position: absolute;
top: 50%;
margin-top: -2px;
right: 8px;
}
.selectBox #inptSelect {
width: 100%;
padding: 2px 4px;
}
.selectBox .optionDiv {
display: none;
width: 100%;
border: 1px solid #ddd;
border-top: none;
border-radius: 1px;
background: #fff;
margin-top: 26px;
position: absolute;
z-index: 100;
border-radius: 2px;
}
.selectBox .optionDiv .ulShow {
display: block;
}
.selectBox .optionDiv ul li {
cursor: pointer;
height: 26px;
line-height: 26px;
font-size: 13px;
text-indent: 6px;
}
.selectBox .optionDiv ul li:hover {
background: #4a77ac;
color: #fff;
}
jq
$('.selectBox #inptSelect').on('click', function () {
$(this).siblings('.optionDiv').toggleClass('ulShow');
});
$('.selectBox .optionDiv ul li').on('click', function () {
var selTxt = $(this).text();
$('.selectBox #inptSelect').text(selTxt);
$('.optionDiv').removeClass('ulShow');
});