码迷,mamicode.com
首页 > 其他好文 > 详细

layui动态修改表单form内容

时间:2020-07-02 13:13:05      阅读:587      评论:0      收藏:0      [点我收藏+]

标签:alt   dem   turn   jquer   http   操作   插入   ima   问题   

最近使用到了基于jquery的layui框架,在使用layui的form表单的时候,会遇见一个问题,页面渲染完成之后,使用js或jquery操作表单dom元素是没有问题的,但表单内容并随之没有改变,需要使用layui提供的方法来重新渲染表单

一、初始化表单

1、dom结构如下

技术图片

2、layui方法初始化表单,js代码如下:

技术图片

// 初始化表单
layui.use(‘form‘, function () {
  form = layui.form;
  //监听提交
  form.on(‘submit(formDemo)‘, function (data) {
  console.log(data.field);
  return false;
 });
});

3、虽然使用dom操作成功了,但表单里面并不会显示插入的内容

技术图片

解决的方法

1、 在dom操作之后添加一行代码,重新渲染整个表单或者重新渲染select,即可使得dom操作得效果展现出来,代码如下:

技术图片

2、最终得效果图如我们所愿

技术图片

layui动态修改表单form内容

标签:alt   dem   turn   jquer   http   操作   插入   ima   问题   

原文地址:https://www.cnblogs.com/piaoyi1997/p/13223756.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!