layui 自定义动态添加select下拉菜单中的内容展示

onlylele

已于 2024-11-19 12:25:45 修改

阅读量6k

点赞数 2

分类专栏： layui 文章标签： layui javascript

于 2019-09-05 11:04:43 首次发布

本文链接：https://blog.youkuaiyun.com/onlylele/article/details/100553956

版权

layui 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在layui中实现自定义动态添加select下拉菜单的内容。通过html和javascript代码配合，可以实现动态生成和更新下拉选项，为用户界面提供更灵活的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. html部分：

<div class="layui-input-inline">
    <select name="warehouse" lay-verify="required" lay-filter="warehouse"  id="warehouse">
           <option value="">选择仓库</option> 
    </select>
</div>

2.js部分：

 //选择仓库内容；
getwarehouse();
function getwarehouse() {
     var warehouse = [];
    layui.$.ajax({ // 使用layui模块化加载
        url: "/api/purchase/warehouseCondition",
        type: 'GET',
        dataType: 'json',
        success: function(datas, textStatus, xhr) {
             var selects='';
             warehouse = datas.data;
           for(var b in warehouse){
                var  its='<option value="'+warehouse[b].id+'">'+warehouse[b].name+'</option>';
                 selects +=its;
            }
           $("#warehouse").append(selects);
            form.render();//菜单渲染 把内容加载进去
        },
        error: function(xhr, textStatus, errorThrown) {
                    //called when there is an error
        }
   });
}