本文共 991 字，大约阅读时间需要 3 分钟。

Layui框架实现下拉框搜索功能

在开发后台管理页面时，经常需要实现下拉框的搜索功能。尤其是在有类型表的情况下，下拉框的选项需要与数据库数据保持一致。如果数据库数据发生修改，下拉框的内容也需要动态更新。

Layui框架实现

HTML页面

   
    
    
             垃圾名称：
                 全部            
    
   

JS代码实现

layui.use(['form', 'table', "laydate", 'layer'], function() {    var form = layui.form;    var layer = layui.layer;    $.ajax({        url: '/refuse-web/admin/getRefuseName',        dataType: 'json',        type: 'get',        success: function(data) {            let str = "全部";            for (let i of data) {                str += `${i.name}`;            }            $("#refusename").html(str);            form.render();        }    });});

实现总结

这种实现方式非常适合用于动态获取类型表数据作为筛选条件。虽然使用了Layui框架，但类似的实现方法在其他前端框架中也是可行的。

具体来说，实现逻辑主要包括以下几个部分：

这种方法的核心优势在于：

• 不需要手动维护静态选项，动态获取最新数据。
• 灵活性高，可以通过改写接口URL和返回格式支持多种数据源。
• 易于维护，代码结构简单明了。

如果项目无须Layui框架支持，也可以通过类似的方式实现动态下拉框功能。这种方法不仅仅限于类型表，支持各种类型的动态数据展示和筛选。

转载地址：http://lphtz.baihongyu.com/