layui动态下拉列表需要渲染
动态下拉列表元素添加上后,需要在添加方法后渲染表单,前端才可展示出来
<select name="code" id="OpSelect" onchange="getValue()" lay-verify="required" >
<option value=""></option>
</select>
$(document).ready(
function() {
$("#OpSelect").empty(); //清空下拉列表
$.ajax({
// alert(rootPath)
url: rootPath + "/SfKafkaMsgValueController/queryAllTopic",
type: "POST",
dataType: 'text',
success: function (jsonlist) {
console.log("获取到" + jsonlist)
//获取到后端的参数jsonList,调用showData方法,添加下拉框元素
showData(jsonlist);
console.log("1+2=3")
//进行渲染
layui.use('form', function(){
var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
form.render();
form.render('required' ,'test'); //刷新select选择框渲染
});
},
error: function (error) {
console.log(error)
}
});
})
//添加下拉列表
function showData(jsonlist) {
var str = "";
str = jsonlist.substring(1,jsonlist.length-1);
var strings = str.split(",");
$('#OpSelect').append(new Option());
for (let i = 0, len = strings.length; i < len; i++){
$('#OpSelect').append(new Option(strings[i],i));
}
}
相关内容(我解决的所查看的网页):
解决使用layui的时候form表单中的select等不能渲染的问题(https://www.jb51.net/article/170219.htm)