使用layui 和 jquery 问题小结

最新推荐文章于 2025-07-29 10:30:17 发布

转载最新推荐文章于 2025-07-29 10:30:17 发布 · 482 阅读

文章标签：

#javascript #ViewUI

本文介绍在使用layui框架时如何正确地动态添加select选项，并通过form.render()方法进行表单渲染，确保新添加的选项能够正常显示。

问题

1 在使用 layui 2.2.5 之前，可以引入最新版的 jquery ，使用更好的性能。也可以使用layui 的jquery内部版本。如果引入要在引入layui.js 之前引入

2 使用 select 的动态添加 option 元素时，一直不能渲染出来。后来上网查看资料，发现在更新过表单元素后要使用 form.render() 重新渲染。代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layuitest</title>
    <link rel="stylesheet" href="../js/layui/css/layui.css">
    <script src="../js/jquery/jquery-3.3.1.min.js"></script>
    <script src="../js/layui/layui.js"></script>


</head>
<body>

<div class="layui-form ">
        <form>
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-block">
                    <select name="city" id="label_select">
                        <option value="">请选择城市</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>

                    </select>
                </div>
            </div>

        </form>
</div>

<script>

    $(function () {
        layui.use(["layer","form"],function () {
            var layer = layui.layer,
                form = layui.form;


            $("#btnAppend").click(function () {
                var html = '<p>good</p>';
                $("#testId").append(html);

            });


            var html = "<option value='3'>深圳</option>" ;
            $("#label_select").append(html);
            layer.msg("添加了元素");
            form.render();

        })
    });
</script>

</body>
</html>

View Code

页面加载后就会动态添加选项