以下是用div和
jquery模拟multiple
Select的代码：
HTML代码：
```
<div class="multiple-
select">
<div class="
select-box">
<div class="
selected-items"></div>
<div class="arrow"></div>
</div>
<div class="options">
<div class="option" data-value="1">选项1</div>
<div class="option" data-value="2">选项2</div>
<div class="option" data-value="3">选项3</div>
<div class="option" data-value="4">选项4</div>
</div>
</div>
```
CSS代码：
```
.multiple-
select {
position: relative;
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.
select-box {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.
selected-items {
position: absolute;
top: ;
left: ;
right: 30px;
bottom: ;
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.arrow {
position: absolute;
top: ;
right: ;
width: 30px;
height: 100%;
background-color: #ccc;
}
.arrow:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.options {
position: absolute;
top: 100%;
left: ;
width: 100%;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 5px 5px;
z-index: 999;
display: none;
}
.option {
padding: 5px;
cursor: pointer;
}
.option:hover {
background-color: #f5f5f5;
}
.option.
selected {
background-color: #ccc;
color: #fff;
}
```
jQuery代码：
```
$(function() {
// 点击下拉框
$('.multiple-
select .
select-box').click(function(e) {
e.stopPropagation();
$('.multiple-
select .options').toggle();
});
// 点击选项
$('.multiple-
select .option').click(function(e) {
e.stopPropagation();
var value = $(this).data('value');
var text = $(this).text();
if ($(this).hasClass('
selected')) {
$(this).removeClass('
selected');
$('.multiple-
select .
selected-items [data-value="' + value + '"]').remove();
} else {
$(this).addClass('
selected');
$('.multiple-
select .
selected-items').append('<span data-value="' + value + '">' + text + '<i class="fa fa-times"></i></span>');
}
});
// 点击删除选项
$('.multiple-
select .
selected-items').on('click', 'span', function(e) {
e.stopPropagation();
var value = $(this).data('value');
$('.multiple-
select .option[data-value="' + value + '"]').removeClass('
selected');
$(this).remove();
});
// 点击其他地方隐藏下拉框
$(document).click(function() {
$('.multiple-
select .options').hide();
});
});
```
最低0.47元/天 解锁文章
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
