layui框架下如何給select的option選項賦值

后端返回數據格式

axios方法執行成功后返回的數據格式如下圖

前端下拉框

<div class="layui-form-item">
    <label class="layui-form-label">年級</label>
    <div class="layui-input-block">
        <select name="gradeId" id="gradeId" lay-verify="required"></select>
    </div>
</div>

前段js

axios({
    url:"grade/list",
    method:'get'
})
.then(response=> {
    data = response.data.grades
    let options = '<option value="">請選擇年級</option>';
    for (let obj of data) {
        options += '<option value="' + obj.id + '">' + obj.name + '</option>'
    }
    $('#gradeId').append(options);
    form.render('select');//處理動態賦值
}).catch(errors=>{
    layui.msg(errors)
});

---

需要注意一點，后端拿到的數據要進行一個動態渲染之后，才會出現效果。

來自官方文檔描述

更新渲染

有些時候，你的有些表單元素可能是動態插入的。這時 form 模塊 的自動化渲染是會對其失效的。

雖然我們沒有雙向綁定機制（因為我們叫經典模塊化框架） 但沒有關系，你只需要執行 form.render(type, filter); 方法即可。

第一個參數：type，為表單的 type 類型，可選。默認對全部類型的表單進行一次更新。可局部刷新的 type 如下表：

參數（type）值	描述
select	刷新select選擇框渲染
checkbox	刷新checkbox復選框（含開關）渲染
radio	刷新radio單選框框渲染

form.render(); //更新全部
form.render('select'); //刷新select選擇框渲染
//……

第二個參數：filter，為 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助該參數，對表單完成局部更新。

【HTML】
<div class="layui-form" lay-filter="test1">
  …
</div>
 
<div class="layui-form" lay-filter="test2">
  …
</div>
      
【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器內的全部表單狀態
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器內的全部 select 狀態
//……

參考鏈接：

https://www.cnblogs.com/ovim/p/13171097.html
https://www.layui.com/doc/modules/form.html