在
layui中，编辑
弹窗回显可以通过使用form.val()方法来
实现。具体步骤如下：
1. 在打开编辑
弹窗之前，先获取需要编辑的数据，并将数据赋值给
表单元素。
2. 在
弹窗中，
表单元素的name属性需要与获取到的数据
中的字段名相同。
3. 在
弹窗中，使用form.val()方法将获取到的数据回显到
表单中。
下面是一个示例代码：
HTML代码：
```
<form class="
layui-form" action="">
<div class="
layui-form-item">
<label class="
layui-form-label">用户名</label>
<div class="
layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">性别</label>
<div class="
layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">城市</label>
<div class="
layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit lay-filter="formDemo">立即
提交</button>
<button type="reset" class="
layui-btn
layui-btn-primary">重置</button>
</div>
</div>
</form>
```
JS代码：
```
// 获取需要编辑的数据
var data = {
username: '张三',
sex: '男',
city: '北京'
};
// 打开编辑
弹窗之前，将数据赋值给
表单元素
$('input[name="username"]').val(data.username);
$('input[name="sex"][value="'+data.sex+'"]').attr('checked', true);
$('select[name="city"]').val(data.city);
// 在
弹窗中，使用form.val()方法将获取到的数据回显到
表单中
form.val('example', data);
```
在上面的代码
中，form.val()方法的第一个参数是
表单的lay-filter属性值，第二个参数是需要回显的数据对象。在这个例子
中，
表单的lay-filter属性值为example。
扫一扫
1154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
