Java + Layui + Ajax点击更新页面时绑定下拉菜单对应数据

最新推荐文章于 2023-01-16 18:48:36 发布

文渊幽阁

最新推荐文章于 2023-01-16 18:48:36 发布

阅读量512

点赞数

分类专栏： Java 文章标签： layui java ajax

本文链接：https://blog.csdn.net/YCarlos/article/details/101023313

版权

Java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

首先导入layui相关文件，然后贴入如下form表单内容：

<form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div  class="layui-input-block">
                <select id="update_role" name="roleid" lay-filter="aihao">
                    <option value="">---下拉菜单---</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="updateVideo">更新</button>
            </div>
        </div>
    </form>

然后通过ajax调用对应接口查询数据进行绑定，代码如下：

<script>
    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;


        $.ajax({
            type: "get",
            url: "admin/role/selectRole.do",
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {
                    var infos = data.info;
                    $(infos).each(function () {
                        var html = '<option value="' + this.id + '"> ' + this.role + ' </option>';
                        $("#update_role").append($(html));
                    });

                    $.ajax({
                        type:"get",
                        url:"admin/queryById.do" + window.location.search,
                        dataType:"json",
                        success:function (data) {
                            if (data.code == 1) {
                                // 这是layui的语法，用于绑定对应的数据，example跟上面对应的监听名称一致。
                                form.val('example', {
                           
                                    "roleid": data.info.roleid
                                });
                            } else {
                                alert("操作失败");
                            }
                        }
                    });
                    // 用于刷新layui的下拉框
                    layui.form.render("select");
                }
            }
        });

</script>

解释一下为什么要在ajax里面再加ajax，因为是更新页面，所以我们在查询出下拉框数据的时候，要再查询一下对应更新的那条数据，以便点击更新，跳转到更新页面时，下拉框显示的是对应的数据，而不是空白。