用layui实现下拉框输入增加新选项并附带搜索功能

最新推荐文章于 2025-10-23 01:04:43 发布

原创最新推荐文章于 2025-10-23 01:04:43 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

该文章已生成可运行项目，

用layui实现下拉框输入增加新选项并附带搜索功能

1.下拉框能输入搜索下拉选项
2.下拉框能输入增加新下拉选项
话不多说直接上图上代码：
搜索
附带搜索
新增附带新增

附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select Add New Item Example</title>
    <link rel="stylesheet" href="layui-v2.2.5/layui/css/layui.css" media="all">
</head>
<body>
    <div class="layui-form layui-select-add-new">
        <select class="layui-select" lay-search lay-filter="client_name">
            <option value="">请选择或输入新项目</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>

<script src="layui-v2.2.5/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    layui.use('form', function(){
        var form = layui.form;

        // 为 layui 的 select 添加 新建不存在项目功能 ，当搜索项目 不存在时 新建该项
        $('body').on('blur', '.layui-select-add-new .layui-input', function(e){
            var temp_value = e.currentTarget.value.trim(); // 去除空格
            if (temp_value === '') return; // 如果为空，则不执行任何操作
            
            var temp_select_box = $(e.currentTarget).closest('.layui-form-select');
            var true_select = temp_select_box.prev();
            
            // 检查是否已经存在该选项
            var exists = true_select.find('option').filter(function() {
                return $(this).text().trim() === temp_value;
            }).length > 0;

            if (!exists) {
                // 如果选项不存在，则添加新选项
                true_select.append($('<option></option>').val(temp_value).text(temp_value));
                form.render('select'); // 重新渲染 select
            }
        });
    });
</script>

</body>
</html>