layui如何异步加载下拉框

1、第一步：写一个空下拉框的页面，代码如下：

<form class="layui-form">

   <div class="layui-form-item">
       <label class="layui-form-label">下拉选择框</label>
       <div class="layui-input-block">
           <select name="interest" lay-filter="aihao">
           </select>
       </div>
   </div>
</form>

2、第二步：写一个获取下拉框数据的接口，代码如下：

@PostMapping("/queryDemo")

String queryDemo(String value){
   Map<String, String> m = new HashMap<>();
   m.put("name1", "桃子");
   m.put("name2", "猴子");
   m.put("name3", "二愣子");
   return JSON.toJSONString(m);
}

3、第三步：启动接口，访问页面，发现并没有上面变化，数据也没有展示，如图：

。这很正常，下一步写数据请求接口

4、第四步：数据请求接口，这里使用的jquery，大家自行下载即可，代码如下：

layui.use(['jquery', 'table'], function () {

   let $ = layui.jquery;
   
   $.post("http://localhost:8081/queryDemo", {}, function (data) {
       console.log(data);
   })
});

5、第五步：刷新页面，可以看到请求成功，并且看到数量来了，如图:

6、第六步：将数据追加到select后，代码如下，刷新看效果，发现并没有卵用。

$.post("http://localhost:8081/queryDemo", {}, function (data) {

   let d = JSON.parse(data);
   console.log(d)
   let html = '<option>'+d.name1+'</option>'+'<option>'+d.name2+'</option>'+'<option>'+d.name3+'</option>';
   $('select[name="interest"]').append(html);
})

7、第七步：关键的一步，就是dom需要重新挂载，代码如下：

layui.use(['jquery', 'table', 'form'], function () {

   let $ = layui.jquery, form = layui.form;
   $.post("http://localhost:8081/queryDemo", {}, function (data) {
       let d = JSON.parse(data);
       console.log(d)
       let html = '<option>'+d.name1+'</option>'+'<option>'+d.name2+'</option>'+'<option>'+d.name3+'</option>';
       $('select[name="interest"]').append(html);
       form.render();
   })
});

关键： form.render();