给layui select 添加一个close,删除选项

官方文档貌似没有这个方案的配置, 代码来自

转载至 https://gitee.com/layui/layui/issues/I3S42J

效果

给下拉选项添加了一个删除按钮

样式引用

.layui-form-select .layui-select-title .layui-icon-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all .3s;
    -webkit-transition: all .3s;
    font-size: 12px;
}

.layui-form-select .layui-select-title .layui-icon-close::before {
    border-radius: 50%;
    background: #009688;
    color: #fff;
    font-size: 12px;
}

js 代码

layui.use(['form'], function () {
        var form = layui.form;
        // 下拉点击事件
        form.on('select', function(data) {
            if (data.value != "") {
                $(data.elem).siblings(".layui-form-select").children(".layui-select-title").children(".layui-edge").css("display", "none")
                $(data.elem).siblings(".layui-form-select").children(".layui-select-title").append('<i class="layui-icon layui-icon-close selectDelete"></i>')
            } else {
                $(data.elem).siblings(".layui-form-select").children(".layui-select-title").children(".selectDelete").remove()
                $(data.elem).siblings(".layui-form-select").children(".layui-select-title").children(".layui-edge").css("display", "block")
            }
        });
        // 点击删除选中的选项
        $(document).on("click", ".selectDelete", function() {
            $(this).parent(".layui-select-title").siblings("dl").children(".layui-select-tips").click()
            $(this).siblings(".layui-edge").css("display", "block")
            $(this).parent().children(".selectDelete").remove()
        })
    })