相关文章推荐
忐忑的香菜  ·  html删除按钮-掘金·  1 年前    · 
心软的蟠桃  ·  springboot启动报Error ...·  1 年前    · 

官方文档:

有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架, 偷笑.gif ) 但没有关系,你只需要执行 form.render(type, filter); 方法即可。

第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

参数(type)值 描述
select 刷新select选择框渲染
checkbox 刷新checkbox复选框(含开关)渲染
radio 刷新radio单选框框渲染

例子 layui.code

  1. form.render(); //更新全部
  2. form.render('select'); //刷新select选择框渲染

第二个参数:filter,为 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助该参数,对表单完成局部更新。

例子 layui.code

【Html】
<div class="layui-form" lay-filter="test1">
<div class="layui-form" lay-filter="test2">
【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
  <div class="layui-form-item">
        <div class="layui-input-block" style="width: 80%">
            <div class="layui-input-inline">
                <select  name="courseId" id="courseId" lay-filter="couresId">
                    <option value="">请选择课程</option>
                 <#if courses??>
                     <#list courses as item>
                    <option value="${item.id}">${item.courseName}</option>
                     </#list>
                </select>
            <div class="layui-form layui-input-inline" lay-filter="chapterRender">
                <select  name="chapterId" id="chapterId">
                    <option value="">请选择章节</option>
                </select>
form.on('select(couresId)', function(data){
            console.log(data.value); //得到被选中的值
            $.post("${base}/admin/chapter/courses/"+data.value,function (res) {
                if(res.success){
                    var content = '<option value="">请选择章节</option>';
                    $.each(res.data,function (i,val) {
                        // console.log(i + "-" + val.chapterName);
                        content += '<option value="' + i + '">' + val.chapterName + '</option>';
                    console.log(content);
                    var s = $('#chapterId');
                    s.html(content);
                    console.log(s.html());
                    form.render('select','chapterRender');///重新渲染select#chapterId
                }else{
                    layer.msg(res.message);
                                    例:  代码如下: <select id=”sltList” name=”list”> <option value=”1″>张三</option> <option value=”2″>李四</option> </select> // 获取当前选中的option $(‘#sltList’).val() //获取当前选中项的文本 $(‘#sltList option[@selected]’).text(); // 获取当前选中的option, text为文本, val则是option的了 或 var item = $(“select[@name= list] option[@selected]
【JavaScript】
form.render(null, 'test1'); //更新 lay-filter=test1 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter=test2 所在容器内的全部 select 状态
<div class=”layui-form
                                    {name: '综合室', value: '综合室'},//, selected: true。{name: '放射源安全室', value: '放射源安全室'},{name: '质控信息室', value: '质控信息室'},{name: '实验分析室', value: '实验分析室'},{name: '监测应急室', value: '监测应急室'},var mo_deptment="综合室,质控信息室";
eg:在管理一篇博文时,因博文的管理有一列叫:状态的列,该列有诸多状态,如:正常,待审核,删除等…  此时,若使用Select下拉列表进行状态选择,并在选中具体项后,通过Ajax异步提交,在效果及体验上就能得到更大化的体验。
下拉列表例子如下:
<select id=status>
 <option value=0>待审核</option>
 <option value=1>未通过审核</option>
 <option value=2>制作中</option>
 <option value=3>制作完成</option>
 <option value=
ok,一切准备就绪。
创建一个select对象:
$selectCity = $(‘<select />’).attr({ name: ‘city’, class: ‘selectcity’ });
你可以创建一个空的option:
引入需要的css和js
<link rel="stylesheet" href="${ctx}/adminthemes/version3/plugins/layui/css/layui.css" rel="external nofollow" />
[removed][removed]
layui.use('form',function){
var form=layui.form;//注:这是1.0升级到2.0以后的写法,2.
function renderSelect(data){
  var html = '<option value="">分诊类目</option>'
  for (var i = 0; i < data.length; i++) {
    html += '<option value='+ data[i].id +'>'+ data[i].category_name +'</option>'
                                    3.点击删除第一个表格需要重载为不选中无的状态,第二个表格暂无数据。1.把第一个表格选中的数据显示到第一个表格的下方。2.处理成下边展示的数据需要合并单元格。前端自己操作不调用接口。
                                    html代码
<select name="interest" id="proName" lay-filter="aihao" class="laySelect">
                                <option value="">请选择</option>
                            </select>
请求接口拿到数据后
$("#unitName").append(new Option(i
<!--HTML部分-->
<select id="treeType" name="treeType" class="layui-select" lay-filter="treeType">
                                    <option value="4">小树</option>