需求：弹框，多选（限制个数，5个），数据回显
实现：利用jq，自定义弹框，用checkbox自定义多选样式
图示
pic1为已选默认回显的数据，
pic2为点击输入框打开弹层显示可选项，已有选择需要回显已选项）
pic1.png
pic2.png
html
<div class="input_box">
<input type="text" class="input_show" name="data" id="selectLable" value="" />
</div>
<div class="modal modal_labelSelect">
<div class="modal_mask"></div>
<div class="modal_content">
<div class="modal_header">弹框标题（标签多选）</div>
<div class="modal_body">
<ul class="multipleSelectBox"></ul>
</div>
<div class="modal_footer">
<button type="button" class="btn btn_cancel">取消</button>
<button type="button" class="btn btn_save" id="saveMultiple">保存</button>
</div>
</div>
</div>
css
<style>
*{padding: 0;margin:0;box-sizing: border-box;}
html,body{
height: 100%;
font-size: 14px;
}
.input_box{
width: 400px;
height: 40px;
margin: 20px auto;
}
.input_box input{
width: 100%;
height: 100%;
text-indent: 1em;
outline: none;
}
.modal_labelSelect{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
}
.modal_mask{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(20,20,20,.2);
}
.modal_header{
height: 50px;
line-height: 50px;
position: relative;
}
.modal_header:after{
content: '';
width: 100%;
height: 1px;
background: #eee;
position: absolute;
bottom: 0;
left: 0;
}
.modal_content{
width: 500px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 20px;
padding: 0 20px;
}
.modal_footer{
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
position: relative;
}
.modal_footer:before{
content: '';
width: 100%;
height: 1px;
background: #eee;
position: absolute;
top: 0;
left: 0;
}
.modal_footer .btn{
margin-right: 20px;
width: 60px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
border: 1px solid #eee;
outline: none;
cursor: pointer;
font-size: 16px;
}
.modal_footer .btn:last-of-type{
margin-right: 0;
}
.modal_footer .btn.btn_save{
background: #3591f4;
color: #fff;
}
.multipleSelectBox {
display: flex;
flex-wrap: wrap;
}
.multipleSelectBox .itemSpan {
list-style: none;
}
.multipleSelectBox .itemSpan input {
display: none;
}
.multipleSelectBox .itemSpan label {
display: block;
width: 80px;
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
box-sizing: border-box;
padding: 5px 10px;
margin: 10px;
cursor: pointer;
}
.multipleSelectBox .itemSpan label.active {
border: 1px solid #3591f4;
background: #3591f4;
color: #fff;
}
</style>
js
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// 多选数据（字符串）
var allLabel = 'label1,label2,label3,label4,label5,label6,label7,label8,label9,label10';
// 页面打开显示的默认选择
var defaultLabel = 'label2,label4';
// 已选项
var choiceArr = [];
$(function(){
var allLabelArray = allLabel.split(',');
var defaultLabelArr = defaultLabel.split(',').join('/');
$("#selectLable").val(defaultLabelArr);
// 获取光标，打开多选弹框
$("#selectLable").focus(function(){
$(".modal_labelSelect").show();
// 获取页面加载的默认选择项，动态添加获取的多选项
var html = '';
var selectLable = $('#selectLable').val();
// 循环所有可选项添加到ul，并反显已选项
for (var i in allLabelArray) {
if (selectLable.indexOf(allLabelArray[i]) > -1) {
html += `<li class="itemSpan"><input type="checkbox" name="btncheckbox" id="${i}" value="${allLabelArray[i]}" checked/><label for="${i}" class="active">${allLabelArray[i]}</label></li>`
} else {
html += `<li class="itemSpan"><input type="checkbox" name="btncheckbox" id="${i}" value="${allLabelArray[i]}"/><label for="${i}">${allLabelArray[i]}</label></li>`
}
}
$(".modal_body .multipleSelectBox").html(html);
});
// 打开页面已选项 先清空再添加
var selectLable = $('#selectLable').val();
for (var i in allLabelArray) {
if (selectLable.indexOf(allLabelArray[i]) > -1) {
choiceArr.push(allLabelArray[i])
}
}
console.log(choiceArr)
// 多选 最多选择5项
$(".multipleSelectBox").on("click", ".itemSpan label", function () {
var inputAttr = $(this).siblings("input").prop('checked');
if (!inputAttr) {
choiceArr.push($(this).html());
if (choiceArr.length <= 5) {
$(this).addClass("active");
} else {
alert('最多选择5项!');
removeByValue(choiceArr, $(this).html());
$(this).removeClass("active");
$(this).siblings("input").prop('checked', function (i, val) {
return !val;
});
}
} else {
removeByValue(choiceArr, $(this).html());
$(this).removeClass("active");
}
});
// 保存 并将已选项显示到输入框
$('#saveMultiple').click(function () {
var selectLable = "";
$('#selectLable').val('');
for (var i = 0; i < choiceArr.length; i++) {
var item = choiceArr[i];
selectLable = selectLable == ""?item:selectLable + "/" + item;
}
$(".modal_labelSelect").hide();
$('#selectLable').val(selectLable);
});
})
// 关闭弹窗
$(".modal_mask,.btn_cancel").click(function(){
$(".modal_labelSelect").hide();
})
// 移除选项，限制再选
function removeByValue(arr, val) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}
</script>
写在最后
反复测试或许还是会有bug，并不完备，最多5个的限制还有点问题，待努力，先就酱紫记录下来
