问题描述
自己想实现动态渲染layui下拉框的内容,以为使用原始的js写法可以实现,结果却不可以。
错误写法
<div class="layui-input-block">
<select name="year" lay-verify="required" id="year"></select>
</div>
axios.get('/getYearInfo').then(resp => {
var node = document.getElementById('year');
var son = document.createElement("option");
son.text = resp.data[resp.data.length-1];
son.value = resp.data[resp.data.length-1];
node.appendChild(son);
for(var i=0; i<resp.data.length-1; i++){
son = document.createElement("option");
son.text = resp.data[i];
son.value = resp.data[i];
node.appendChild(son)
}
});
正确写法
layui.use(['form','element'], function(){
var form = layui.form;
axios.get('/getYearInfo').then(resp => {
// Option参数说明:Option("text","value")
$("#year").append(new Option(resp.data[resp.data.length-1],
resp.data[resp.data.length-1]));
for(var i=0; i<resp.data.length-1; i++){
$("#year").append(new Option(resp.data[i], resp.data[i]))
}
// 最关键需要重新渲染下拉框
form.render('select')
});
});