Layui select 动态绑定数据多个数据（通过form.on获取）

最新推荐文章于 2025-09-02 13:44:16 发布

原创最新推荐文章于 2025-09-02 13:44:16 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

HTML5 同时被 2 个专栏收录

9 篇文章

订阅专栏

Jquery

6 篇文章

订阅专栏

本文介绍了一篇关于使用layui库进行前端表单开发的教程，包括HTML代码中select元素的配置和JS代码中通过Ajax获取数据动态填充选项。重点展示了如何通过laydate插件实现数据交互并更新选中项的值。

html 代码

<form>
<select name="select1" id="select1" lay-verify="required" lay-search="" lay-filter ="select1">
 <option value="">直接选择或搜索选择</option>
</select>
</form>

js代码

<script type="text/javascript">
    layui.use('laydate', function () {
        let form = layui.form;
        let data = {
            "current": 1,
            "size": 500
        };
        $.ajax({
            url: '/kar/xxx/list',
            dataType: 'json',
            type: 'get',
            data: data,
            success: function (data) {
                if (data) {
                    let rows = data.rows;
                    if (rows) {
                        let content = '';
                        $.each(rows, function (index, item) {
                            content += '<option value="'+item.code+'" data-name="'+item.depar+'">'+item.name+':'+ item.code+'</option>'
                        });
                        $('#select1').append(content);
                        //重新渲染 固定写法
                        layui.form.render("select");
                    }
                }
            }
        });
        form.on('select(select1)', function (r) {
            //业务部门
            let countryEn = $(r.elem).find("option:selected").attr("data-name");
            $("#name").val(countryEn);
        });
        form.render();
    });
</script>