用div+jquery模拟multipleSelect的代码
时间: 2023-04-02 08:03:08 浏览: 111
以下是用div和jquery模拟multipleSelect的代码:
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();
});
});
```