需求: 根据需求,新建表单时,选择不同的radio表单中的内容需要发生变化
思路: 当radio被点击时获取到当前选中的radio值,判断value值控制表单中对应内容的展示
前端代码:
<form class="layui-form" id="mainForm" method="post" action="${mbase}/doWorkflowExecute.action">
<div class="layui-input-block" >
<input type="radio" id="oaaoType" name="oaaoType" lay-filter="radio-type" value="0" title="因公外出" checked="checked">
<input type="radio" id="oaaoType" name="oaaoType" lay-filter="radio-type" value="1" title="因私离杭">
<input type="radio" id="oaaoType" name="oaaoType" lay-filter="radio-type" value="2" title="会议、活动和培训">
</div>
<div id="radioType1">
点击按钮1展示的内容
</div>
<div id="radioType2">
点击按钮2展示的内容
</div>
<div id="radioType3">
点击按钮3展示的内容
</div>
JS代码
layui.use(['element', 'form'], function () {
var element = layui.element;
var form = layui.form;
//选择审批类型时,显示对应的表单内容
form.on('radio(radio-type)', function (data) { //radio-type为lay-filter的属性值
console.log(data.value)
if (data.value === "0") {
$("#radioType1").show();
$("#radioType2").hide();
$("#radioType3").hide();
} else if(data.value === "1") {
$("#radioType1").hide();
$("#radioType2").show();
$("#radioType3").hide();
}else {
$("#radioType1").hide();
$("#radioType2").hide();
$("#radioType3").show();
}
});
})
扩展: 三个div中的有不同的属性,但也有一些公用的属性,之前并未做处理 ,导致在提交以后后端存储的数据出现问题。原因是:多个div都有的字段在提交时,虽然我们只看到了展示的那个字段,但由于未显示的div中含有相同name的字段。name属性与后端的model可以进行映射,最终造成model中的该字段的值为“,,1”这种形式。