option包含四种样式
1、基础结构
2、带描述
3、带图标
4、带分组
注意：字体图标取自bootstrap字体库https://icons.bootcss.com/icons 也可以使用其他字体图标 但需要保留i标签结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.select-container {
margin-top: 700px;;
}
.select-container input {
display: none;
}
.select-box {
position: relative;
border-radius: 0.125rem;
box-sizing: border-box;
}
.select-box i {
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
font-size: 14px;
transition: all .1s;
}
.select-box>i {
color: #16191f;
}
.show-ul .select-box>i {
transform: rotate(180deg);
color: #0073bb;
}
.select-inner,
.select-container li,
.select-ul label {
border-collapse: separate;
border-spacing: 0;
box-sizing: border-box;
caption-side: top;
cursor: auto;
direction: inherit;
empty-cells: show;
font-family: serif;
font-size: medium;
font-style: normal;
font-variant: normal;
font-stretch: normal;
line-height: normal;
-webkit-hyphens: none;
hyphens: none;
letter-spacing: normal;
list-style: disc outside none;
-moz-tab-size: 8;
tab-size: 8;
text-align: start;
text-indent: 0;
text-shadow: none;
text-transform: none;
visibility: visible;
word-spacing: normal;
font-family: "Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
font-size: 14px;
line-height: 22px;
color: #16191f;
font-weight: 400;
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
.select-inner {
padding: 4px 32px 4px 8px;
white-space: inherit;
border: 1px solid #687078;
border-radius: 2px;
background: #fff;
position: relative;
z-index: 2;
}
.select-inner li>i {
display: none;
}
.select-ul {
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 100%;
width: 100%;
display: none;
list-style: none;
border-radius: 2px;
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
max-height: 400px;
overflow-y: auto;
border: 1px solid rgba(0, 28, 36, 0.3);
}
.select-ul li:after{
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
pointer-events: none;
background: transparent;
box-sizing: border-box;
border-radius: 0;
border-top: 1px solid rgba(0, 28, 36, 0.3);
}
.select-ul ul {
padding: 0;
margin: 0;
}
.show-ul .select-ul {
display: block;
margin-top: -1px;
}
.select-container li,
.select-ul label {
position: relative;
inline-size: 100%;
align-items: center;
padding-block: 4px;
padding-inline: 8px;
background-color: #ffffff;
min-block-size: 32px;
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
}
.select-ul li {
position: relative;
border-radius: 2px;
overflow: hidden;
box-sizing: border-box;
}
.select-ul>li:first-child:after,
.select-ul>.group-ul>li:first-child:after {
display: none;
}
.select-ul .click-modal {
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
}
.select-ul label {
display: block;
padding: 4px 8px;
border-top: 1px solid rgba(0, 28, 36, .3);
color: #16191f;
font-weight: 600;
}
.group-list li {
padding-left: 32px;
}
.select-ul .active {
background-color: #f2f3f3;
}
.select-ul .active:after {
border: 1px solid #687078;
}
.select-ul .prev:after {
border-bottom-color: transparent;
}
.select-container .icon-box {
display: flex;
justify-content: center;
align-items: flex-start;
width: 32px;
height: 100%;
padding-right: 8px;
}
.select-container .inner-box {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
display: flex;
flex-direction: column;
padding-right: 32px;
}
.inner-box .inner-tips {
color: #687078;
font-size: 0.75rem;
}
.select-ul li>i {
display: none;
color: #0073bb;
width: 32px;
}
.select-ul .selected {
background: rgba(0, 115, 187, .1);
}
.select-ul .selected>i {
display: flex;
}
.select-inner>span {
display: flex;
}
.select-inner .inner-box {
padding-right: 0;
}
.select-container .disable,
.select-container .disable .inner-tips,
.select-container .disable i {
color: #aab7b8;
}
.top-ul .select-ul {
margin-top: 1px;
}
</style>
</head>
<script src="jq.js"></script>
<body>
<div class="select-container">
<div class="select-box">
<input type="text" value="">
<div class="select-inner">所有选项</div>
<ul class="select-ul">
<!-- 无描述信息，无图标 -->
<li class="select-item">
<span class="inner-box"><span class="inner-val">所有选项</span></span>
<i class="bi bi-check-lg"></i>
<span class="click-modal" index="0" dataid="所有选项"></span>
</li>
<!-- 有描述，无左侧图标 -->
<li class="select-item">
<span class="inner-box"><span class="inner-val">北冰洋</span><span class="inner-tips">This is a description</span></span>
<i class="bi bi-check-lg"></i>
<span class="click-modal" index="1" dataid="北冰洋"></span>
</li>
<!-- 有图标，有描述 -->
<li class="select-item selected">
<span class="icon-box"></span>
<span class="inner-box"><span class="inner-val">养乐多123</span><span class="inner-tips">This is a description</span><span class="inner-tips">This is a description</span></span>
<i class="bi bi-check-lg"></i>
<span class="click-modal" index="2" dataid="养乐多123"></span>
</li>
<!-- 带分组 -->
<div class="group-ul">
<label class="group-label disable">所有选项</label>
<ul class="group-list">
<li class="select-item disable">
<span class="inner-box"><span class="inner-val">优乐美</span><span class="inner-tips">This is a description</span></span>
<i class="bi bi-check-lg"></i>
<span class="click-modal" index="3" dataid="优乐美"></span>
</li>
<li class="select-item">
<span class="inner-box"><span class="inner-val">牛奶</span><span class="inner-tips">This is a description</span></span>
<i class="bi bi-check-lg"></i>
<span class="click-modal" index="4" dataid="牛奶"></span>
</li>
</ul>
</div>
<div class="group-ul">
<label class="group-label">所有选项1</label>
<ul class="group-list">
<li class="select-item disable">
<span class="inner-box"><span class="inner-val">优乐美2</span><span class="inner-tips">This is a description</span></span>
<i class="bi bi-check-lg"></i>
<span class="click-modal" index="5" dataid="优乐美2"></span>
</li>
<li class="select-item">
<span class="inner-box"><span class="inner-val">牛奶2</span><span class="inner-tips">This is a description</span></span>
<i class="bi bi-check-lg"></i>
<span class="click-modal" index="6" dataid="牛奶2"></span>
</li>
<li class="select-item">
<span class="inner-box"><span class="inner-val">牛奶5</span><span class="inner-tips">This is a description</span></span>
<i class="bi bi-check-lg"></i>
<span class="click-modal" index="7" dataid="牛奶52"></span>
</li>
</ul>
</div>
</ul>
<i class="bi bi-caret-down-fill"></i>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(window).on('click', function(event) {
let selects = $('.select-container')
$.each(selects, function(index, el) {
$(el).removeClass('show-ul')
})
})
$(document).on('click', '.select-container', function(event) {
event.stopPropagation()
let items = $(this).find('.select-item'),
offset= $(this).offset(),
left = offset.left,
top = offset.top
ulHeight = $(this).find('.select-ul').height(),
clentHeight = $(window).height(),
conHeight = Number($('.select-container').css('height').split('px')[0]);
$.each(items, function(index, el) {
$(el).removeClass('active')
})
if ($(this).hasClass('show-ul')) {
$(this).removeClass('show-ul')
} else {
$(this).addClass('show-ul')
$(this).find('.selected').addClass('active')
}
if(clentHeight - top - conHeight < ulHeight) {
$(this).find('.select-ul').css('top', -ulHeight + 'px')
$(this).addClass('top-ul')
} else {
$(this).find('.select-ul').css('top', '100%')
$(this).removeClass('top-ul')
}
})
$(document).on('click', '.select-ul', function(event) {
let that = $(event.target),
index = that.attr('index'),
targetParent = that.parent(),
selectVal = targetParent.find('.inner-val').html(),
selectShow = $(this).parent().find('.select-inner'),
dataId = that.attr('dataid');
console.log(that)
if (that.hasClass('group-label') || that.parent().hasClass('disable')) {
return false
}
event.stopPropagation()
let items = $(this).find('.select-item');
$.each(items, function(index, el) {
$(el).removeClass('selected')
})
selectShow.html('<span>' + targetParent.html() + '</span>')
items.eq(index).addClass('selected')
$(this).find('input').val(dataId)
$(this).parent().parent().removeClass('show-ul')
})
$(document).on('mouseover', '.select-ul', function(event) {
let that = $(event.target),
index = that.attr('index');
event.stopPropagation()
if (that.hasClass('group-label')) {
return false
}
let items = $(this).find('.select-item');
$.each(items, function(index, el) {
$(el).removeClass('active')
$(el).removeClass('prev')
})
items.eq(index).addClass('active')
items.eq(index).prev().addClass('prev')
})
</script>
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
