<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background: #2286b6;
}
.fs-wrap {
position: relative;
display: inline-block;
200px;
font-size: 12px;
line-height: 1;
}
.fs-label-wrap {
cursor: pointer;
color: #fff;
position: relative;
border: 1px solid #ccc;
}
.fs-label-wrap,
.fs-dropdown {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fs-label-wrap .fs-label {
padding: 4px 22px 4px 0px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 16px;
}
.fs-arrow {
0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 4px solid #fff;
position: absolute;
top: 0;
right: 5px;
bottom: 0;
margin: auto;
}
.fs-dropdown {
position: absolute;
background-color: #fff;
margin-top: 8px;
200px;
z-index: 1000;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
/* right: 0; */
}
.fs-dropdown::after{
content: '';
display: inline-block;
position: absolute;
0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
right:24px;
top: -10px;
}
.fs-dropdown .fs-options {
max-height: 200px;
overflow: auto;
}
.fs-search input {
100%;
padding: 2px 4px;
border: 0;
}
.fs-wrap .fs-option,
.fs-wrap .fs-search,
.fs-wrap .fs-optgroup-label {
padding: 6px 8px;
border-bottom: 1px solid #eee;
cursor: pointer;
color: #444;
font-size: 14px;
}
.fs-option {
cursor: pointer;
}
.fs-option .fs-option-label{
color: #666;
font-size: 14px;
}
.fs-option.hl {
background-color: #f5f5f5;
}
.fs-wrap.multiple .fs-option {
position: relative;
padding-left: 30px;
}
.fs-wrap.multiple .fs-checkbox {
position: absolute;
display: block;
30px;
top: 0;
left: 0;
bottom: 0;
}
.fs-wrap.multiple .fs-option .fs-checkbox i {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
14px;
height: 14px;
border: 1px solid #aeaeae;
border-radius: 2px;
background-color: #fff;
}
.fs-wrap.multiple .fs-option.selected .fs-checkbox i {
background-color: rgb(17, 169, 17);
background-color: #2196F3;
border-color: transparent;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: center;
}
.fs-wrap .fs-option:hover {
background-color: #f5f5f5;
}
.fs-optgroup-label {
font-weight: bold;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="demo1"></div>
<div id="demo2" style="margin-left: 300px;">
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
(function ($) {
$.fn.extend({
mySelect: function (option) {
that = this
var htmlStr = ''
function buildOptions(dataArr) {
var choices = '';
dataArr.forEach(function(item,index) {
choices += '<div class="fs-optgroup">';
var optgroupLabel = option.multiple ? '<div class="fs-optgroup-label">' + item.title + '</div>' : ''
choices += optgroupLabel;
item.data.forEach(function(item1,index1) {
var selected = item1.isSlected ? ' selected' : '';
choices += '<div class="fs-option' + selected + '" data-value="' + item1.value + '">'
+'<span class="fs-checkbox"><i></i></span>'
+'<div class="fs-option-label">' + item1.label + '</div>'
+'</div>';
})
choices += '</div>';
})
return choices;
}
var label = ''
option.source[0].data.forEach(function(item){
if(item.isSlected){
label = item.label
return
}
})
var fsLabel = option.multiple ? option.labelName : label
htmlStr = '<div class="fs-wrap multiple" data-mul="'+option.multiple+'">'
+'<div class="fs-label-wrap">'
+'<div class="fs-label">'+fsLabel+'</div>'
+'<span class="fs-arrow"></span>'
+'</div>'
+'<div class="fs-dropdown hidden">'
+'<div class="fs-options">'
+'</div>'
+'</div>'
+'</div>'
that.html(htmlStr)
var choices = buildOptions(option.source)
$(option.el+' .fs-options').html(choices)
// 显示隐藏
$(document).off('click','.fs-label-wrap').on('click','.fs-label-wrap', function(e) {
// console.log(e);
var $el = $(e.target);
var $wrap = $el.closest('.fs-wrap');
var isHidden = $wrap.find('.fs-dropdown').hasClass('hidden')
if(isHidden){
$('.fs-dropdown').addClass('hidden');
$wrap.find('.fs-dropdown').removeClass('hidden');
}else{
$wrap.find('.fs-dropdown').addClass('hidden');
}
});
// 选择
$(document).off('click','.fs-option').on('click','.fs-option', function(e) {
// var $el = $(e.currentTarget);
// var $optgroup = $el.closest('.fs-optgroup');
var $optgroup = $(this).closest('.fs-optgroup');
var $wrap = $(this).closest('.fs-wrap');
var isMul = $wrap.attr('data-mul')
if(isMul === 'false'){
$optgroup.find('.fs-option').removeClass('selected')
$wrap.find('.fs-label').html($(this).html())
}
$(this).toggleClass('selected');
var selected = [];
$optgroup.find('.fs-option.selected').each(function(i, el) {
selected.push($(el).attr('data-value'));
});
console.log(selected);
});
}
});
})(jQuery);
</script>
<script>
$(function() {
var _option = {
el:'#demo1',
multiple:true,
labelName:'头标题',
source:[
{
title:'吃的',
data:[{
value: '选项1',
label: '黄金糕',
isSlected:true
}, {
value: '选项2',
label: '双皮奶',
isSlected:true
}, {
value: '选项3',
label: '蚵仔煎',
isSlected:true
}, {
value: '选项4',
label: '龙须面',
isSlected:true
}, {
value: '选项5',
label: '北京烤鸭',
isSlected:true
}]
},
{
title:'吃的好',
data:[{
value: '选项1',
label: '黄金糕',
isSlected:true
}, {
value: '选项2',
label: '双皮奶',
isSlected:true
}, {
value: '选项3',
label: '蚵仔煎',
isSlected:true
}, {
value: '选项4',
label: '龙须面',
isSlected:true
}, {
value: '选项5',
label: '北京烤鸭',
isSlected:true
}]
},
]
}
var _option1 = {
el:'#demo2',
multiple:false,
labelName:'头标题',
source:[
{
title:'吃的',
data:[{
value: '选项1',
label: '黄金糕',
isSlected:true
}, {
value: '选项2',
label: '双皮奶',
isSlected:true
}, {
value: '选项3',
label: '蚵仔煎',
isSlected:true
}, {
value: '选项4',
label: '龙须面',
isSlected:true
}, {
value: '选项5',
label: '北京烤鸭',
isSlected:true
}]
}
]
}
$('#demo1').mySelect(_option)
$('#demo2').mySelect(_option1)
});
</script>
</body>
</html>