layui+java：前后端动态下拉框交互

页面

<div class="layui-form-item">
    <label class="layui-form-label">动态下拉</label>
    <div class="layui-input-block">
        <select name="code" id="OpSelect" lay-verify="required">
            <option value=""></option>
        </select>
    </div>
</div>

JS
 

var selectApi= "/***/getTypeList";//TODO:下拉数据api
$.ajax({
    type: "GET",
    url:selectApi,
    datatype: "json",
    success: function (data) {
        $.each(data, function (index, item) {
            $('#OpSelect').append(new Option(item.value, item.code));// 下拉菜单里添加元素
        });
        layui.form.render('select');
    }, error: function () {
       console.log('error')
    }
});

后端

@RequestMapping("/getTypeList")
@ResponseBody
public List<Map<String, String>> getTypeList() {
    List<TypeBean> list =list();
    List<Map<String,String>> result = new ArrayList<>();
    for (TypeBean entity : list) {
        Map map = new HashMap();
        map.put("code", entity.getCode());
        map.put("value", entity.getValue());
        result.add(map);
    }
    return result;
}

private List<TypeBean> list(){
    //TODO 获取list
  
}

@Data
public class TypeBean{
    private String code;
    private String value;
}