Layui 异步加载select选择框数据

页面效果

场景: 比如使用layui.table数据表格显示了所有项目数据，客户数据对应另外的表数据集合，现在需要修改客户名称，需要把数据回显到表单中，然后进行修改

实现

<div class="layui-form-item">
     <label class="layui-form-label">客户名称</label>
     <div class="layui-input-block">
         <select name="customerId" id="customerId" lay-verify="title" lay-filter="customer-query" >
             <option value=""></option>
         </select>
     </div>
 </div>

关键代码是，拿到后端数据，并遍历，动态添加option标签，并填充对应的值

$.ajax({
     url: '/api/customer/listCustomerName',
     dataType: 'json', //服务器返回json格式数据
     type: 'get', //HTTP请求类型
     timeout: 10000, //超时时间设置为10秒；
     success: function(data) {
         $.each(data.data, function (index, value) {
             $('#customerId').append(new Option(value.customerName,value.id));// 下拉菜单里添加元素
         });

         // 工具客户id，选择客户对应的值
         const value = [[${project.customerId}]];
         $('#customerId').find("option[value="+value+"]").attr("selected",true);
         layui.form.render("select");
     }
 });