当 layui 的 select 下拉框 搜索不存在的项目时新建该项

默认选项


image.png

新建不存在项


image.png

image.png

可以看到下拉选项多了刚刚新建的 项


image.png

需要在 select 外面套个 元素,并添加类"layui-select-add-new"

                      <div class="layui-select-add-new">
                            <select class="layui-select" lay-search lay-filter="client_name">
                                <option value="" id="new_client_name"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
    // 为 layui 的 select 添加 新建不存在项目功能 ,当搜索项目 不存在时 新建该项
    $('body').on('keyup', '.layui-select-add-new .layui-select-title input', function(e){
        temp_value = e.currentTarget.value;
        temp_select_box = $(e.currentTarget).parents('.layui-form-select');
        true_select = temp_select_box.prev();
        
        true_select.find('option').eq(0).val(temp_value).html(temp_value);

        temp_sel = temp_select_box.find('.layui-anim-upbit dd').eq(0);
        temp_sel.removeClass('layui-select-tips');
        temp_sel.attr('lay-value',temp_value);
        temp_sel.html(temp_value);
    });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容