layui动态加载select下拉数据，点击两次才出现的问题

最新推荐文章于 2023-05-10 09:46:48 发布

SD_54

最新推荐文章于 2023-05-10 09:46:48 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Layui 文章标签： layui动态获取下拉数据点击两次才出现下拉选项

本文链接：https://blog.youkuaiyun.com/qq_24484911/article/details/94150368

Layui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在layui框架中动态加载下拉选择框(select)的选项，并通过form.render('select')方法重新渲染select，确保选项更新。文章提供具体代码示例，包括使用ajax请求填充select选项和在弹出框中更新select内容的方法。

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

描述

这里指的是通过layui官方示例中的方式写的select，如下：

<div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
    <select name="interest" lay-filter="aihao">
        <option value="0">写作</option>
        <option value="1">阅读</option>
    </select>
    </div>
</div>

试了一下是class="layui-form-item"影响的，只不过去掉的话格式不统一了。

解决

在ajax请求success中或者弹出框的success中加上：form.render("select")，重新渲染select即可

success: function(data) {
        var funList = data.funList;
        for (var i = 0; i < funList.length; i++) {
            $("#functionCode").append((new Option(funList[i].functionCode + " " + funList[i].functionName, funList[i].functionCode)));
            form.render('select'); //刷新select选择框渲染

        }
    }

layer.open({
	type: 1,
	title: '新增用户',
	area: ['700px', '500px'],
	content: $("#add-main"),
	success: function(layero, index){
		form.render('select'); //刷新select选择框渲染

	}
})

如何动态获取下拉选项，见 https://blog.youkuaiyun.com/qq_24484911/article/details/94136311