当前位置： 移动技术网 > IT编程>脚本编程>Ajax > Layui框架select数值回显选中默认的option方法

Layui框架select数值回显选中默认的option方法

2020年07月22日  | 移动技术网IT编程  | 我要评论

 今天再做项目，layui框架回显不支持select下拉框，结果再百度找解决方案，看了大部分都是用ajax重新获取列表来实现的，我重新写了一个，用起来还是比较方便和简单。

前端代码

<!-- 管理员修改 -->
<script type="text/html" id="AdminEdit">
    <form id="AdminEditForm" lay-filter="AdminEditForm" class="layui-form model-form" style="margin-top:20px">
        <input name="dictId" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">账号昵称</label>
            <div class="layui-input-block">
                <input name="name" placeholder="请输入管理员昵称" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登陆账号</label>
            <div class="layui-input-block">
                <input name="username" placeholder="请输入管理员登陆账号" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色组</label>
            <div class="layui-input-block">
              <select id="group_list" name="group_id">
                <option value=""></option>
                {volist name="Group_list" id="vo"}
                <option value="{$vo.id}">{$vo.group_name}</option>
                {/volist}
              </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登陆密码</label>
            <div class="layui-input-block">
                <input name="password1" placeholder="请输入管理员登陆密码" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input name="password2" placeholder="请输入管理员登陆密码" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="AdminEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

框架代码

table.on('tool(admin_list)', function (obj) {
        if (obj.event === 'edit') { // 修改
            var id = obj.data;
            // console.log(obj.data);
            // 打开编辑页面
            var index = admin.open({
                type: 1,
                title:'品牌编辑',
                content: $('#AdminEdit').html(),
                area: ['600px', '450px'],
                maxmin:true,
                end:function(){
                    AdminTable.reload({page: {curr: 1}});
                },
                success:function(data){
                    //打开弹出层后执行该操作，绑定select组件ID
                    var select = document.getElementById("group_list");
                    //循环遍历option里面的值，然后加判断
                    for(var i=0;i<select.options.length;i++){
                        //如果和回显值一致则selected为true就可以了
                        if(select.options[i].value == obj.data.group_id){
                            select.options[i].selected = true;
                        }
                    }
                    form.render();
                    form.val('AdminEditForm',{
                        'username':obj.data.username,
                        'name':obj.data.name
                    })
                }
            });
        } else if (obj.event === 'del') { // 删除
            doDel(obj);
        }
    });

 

本文地址：https://blog.csdn.net/srbhll/article/details/107461286

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网