一定要包裹在form表单中 如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能
<form class="layui-form" action="" style="display: flex">
<div class="layui-form-item">
<label class="layui-form-label">电压等级</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" id="leave" lay-filter="leave">
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">设备状态</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" id="status" lay-filter="status">
</select>
</div>
</div>
<button style="margin-left: 20px" type="button" class="layui-btn submit">确认</button>
</form>
<!--设备状态-->
<script type="text/html" id="statusList">
<option value="">请选择设备状态</option>
{{each}}
<option value="{{$value.id}}">{{$value.ziduan_name}}</option>
{{/each}}
</script>
//重新渲染表单
function renderForm(){
layui.use('form', function(){
var form = layui.form;//高版本建议把括号去掉,有的低版本,需要加()
form.render();
});
}
//设备状态 我这里用的arttempalte 来渲染数据的
function statusList () {
let url1 = api.ziduanlist;
let data1 = {
token: localStorage.getItem('token'),
type:4,
page:-1,
pagecount:0
}
Ajax(url1,data1,function (res) {
console.log('字段列表'+res)
if (res.errorCode == 0){
var tem_name = 'statusList';
var tem_html = template(tem_name, res.info.list);
$("#status").html(tem_html);
renderForm(); //公共方法 动态赋值后重新渲染一下 不然显示不出来内容
}else {
alert(res.errorValue);
}
})
}
statusList();
//监听select
layui.use('form', function () {
var form = layui.form;
form.on('select(status)', function (data) { // 监听select lay-filter="status" 为status的值
console.log(data.value); //得到被选中的值
shebeizhuangtai_ids = data.value;
});
form.render('select'); //刷新select选择框渲染
})