ajax异步返回的json数据如何动态的添加到layui的select下拉框的option中

后端代码：

@RequestMapping("/getCardRuleType")
@ResponseBody
public String getCardRuleType(){
    String response = WebServiceUtils.doGet(cardRebuildUrl+"/payCardBatch/getCardRule",null);
    JSONObject json = JSONObject.parseObject(response);
    if(json!=null&&json.get("data")!=null){
        return json.getString("data");
    }
    return "";
}

前端代码：

//获取待选规则
$(document).ready(function () {
    var url=$("#webRoot").val()+"/xxx/getCardRuleType";
    $.ajax({
        url:url,
        type:"POST",
        success:function(datas){
            console.log(datas);
            if(datas.length>0){
                $("#cardRuleId").empty();//清空下拉框
                $("#cardRuleId").append("<option value=''>--请选择--</option>");
                for(var i=0;i<datas.length;i++){
                    var item=datas[i];
                    $("#cardRuleId").append("<option value="+item.value+">"+item.name+"</option>");
                }
            }else {
                $("#cardRuleId").empty();//清空下拉框
                $("#cardRuleId").append("<option value=''>--请新建规则--</option>");
            }
            form.render();//注意渲染页面表单，否则不显示数据
        },
        error: function() {
            layer.msg('获取规则失败');
            form.render();
        }
    });
})