layui的form表单中select选择框内容不显示

页面问题如图

性别和户主关系的下拉选择框没有显示
layui的form表单中select选择框内容不显示_第1张图片

html文件代码如下

检查html代码没有发现问题
layui的form表单中select选择框内容不显示_第2张图片

js文件代码如下

layui的form表单中select选择框内容不显示_第3张图片

问题原因及解决办法

layui下如 html代码是动态生成的,自动渲染会失效,此时需要手动渲染表单在 js文件中的适当位置添加 form.render(); 即可解决问题;解决js代码如下
‘use strict’

layui.use([‘layer’,‘form’,‘table’,‘laydate’,‘admin’], function() {

var layer = layui.layer;
var form = layui.form;
var table = layui.table;
var laydate = layui.laydate;
var admin = layui.admin;

var firstIndex = layer.index;
var fundAidInfoId = admin.getTempData('fundAidInfoId');

//手动渲染form表单,解决select选择框不显示问题
form.render();

//表单提交事件
form.on('submit(fundAidInfoIdFamilyAdd-submit)', function (data) {
	data.field.jzfpId = fundAidInfoId;
	$.post("../user/fundHouseJzfpFamily/add",data.field, function(result,status) {
		if(result.success){
			layer.alert('添加成功',{
				icon: 1,
				yes: function(index){
					layer.close(index);
					layer.close(firstIndex);
					table.reload('fundAidInfoIdEdit-family-table',{});
				}
			});
		}else{
			layer.alert(result.msg,{icon: 5});
		}
		
	},'json');
	return false;
});	

})

解决问题后效果图

layui的form表单中select选择框内容不显示_第4张图片

你可能感兴趣的:(前端页面知识)