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

首先导入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,因为是更新页面,所以我们在查询出下拉框数据的时候,要再查询一下对应更新的那条数据,以便点击更新,跳转到更新页面时,下拉框显示的是对应的数据,而不是空白。

发布了15 篇原创文章 · 获赞 11 · 访问量 2791

猜你喜欢

转载自blog.csdn.net/YCarlos/article/details/101023313