Skip to main content

重新渲染select

1. 使用 form.render() 方法

// 重新渲染所有表单元素
layui.form.render();

// 只重新渲染 select 元素
layui.form.render('select');

// 渲染指定容器的 select 元素
layui.form.render('select', 'container-id');

2. 动态更新选项后重新渲染

// 获取 layui 模块
var form = layui.form;

// 动态修改 select 选项
$('#test-select').html(''
    + '<option value="">请选择</option>'
    + '<option value="1">选项1</option>'
    + '<option value="2">选项2</option>'
    + '<option value="3">选项3</option>'
);

// 重新渲染 select
form.render('select');

3. 完整的示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui Select 重新渲染示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md6">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择框</label>
                        <div class="layui-input-block">
                            <select name="city" id="city-select" lay-verify="required">
                                <option value="">请选择城市</option>
                                <option value="1">北京</option>
                                <option value="2">上海</option>
                                <option value="3">广州</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="update-btn">更新选项</button>
                            <button type="button" class="layui-btn layui-btn-normal" id="reset-btn">重置选项</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
    <script>
        layui.use(['form', 'jquery'], function(){
            var form = layui.form;
            var $ = layui.$;
            
            // 初始化表单
            form.render();
            
            // 更新选项按钮点击事件
            $('#update-btn').on('click', function(){
                // 动态更新选项
                $('#city-select').html(''
                    + '<option value="">请选择城市</option>'
                    + '<option value="4">深圳</option>'
                    + '<option value="5">杭州</option>'
                    + '<option value="6">成都</option>'
                    + '<option value="7">武汉</option>'
                );
                
                // 重新渲染 select
                form.render('select');
                
                layer.msg('选项已更新');
            });
            
            // 重置选项按钮点击事件
            $('#reset-btn').on('click', function(){
                // 恢复原始选项
                $('#city-select').html(''
                    + '<option value="">请选择城市</option>'
                    + '<option value="1">北京</option>'
                    + '<option value="2">上海</option>'
                    + '<option value="3">广州</option>'
                );
                
                // 重新渲染 select
                form.render('select');
                
                layer.msg('选项已重置');
            });
        });
    </script>
</body>
</html>

4. 异步加载数据后重新渲染

layui.use(['form', 'jquery'], function(){
    var form = layui.form;
    var $ = layui.$;
    
    // 从服务器加载数据
    function loadSelectData() {
        $.ajax({
            url: '/api/cities',
            type: 'GET',
            success: function(result){
                var options = '<option value="">请选择</option>';
                
                // 构建选项
                $.each(result.data, function(index, item){
                    options += '<option value="' + item.id + '">' + item.name + '</option>';
                });
                
                // 更新 select
                $('#city-select').html(options);
                
                // 重新渲染
                form.render('select');
            }
        });
    }
    
    // 调用加载函数
    loadSelectData();
});

No comments to display

Back to top