官方文档:
有些时候,你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,
偷笑.gif
) 但没有关系,你只需要执行
form.render(type, filter);
方法即可。
第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:
参数(type)值
|
描述
|
select
|
刷新select选择框渲染
|
checkbox
|
刷新checkbox复选框(含开关)渲染
|
radio
|
刷新radio单选框框渲染
|
-
form.render(); //更新全部
-
form.render('select'); //刷新select选择框渲染
第二个参数:filter,为
class="layui-form"
所在元素的
lay-filter=""
的值。你可以借助该参数,对表单完成局部更新。
【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>