# 异步加载 ## 6.3.2.异步加载 ~~~ <input id="demoCascader1" placeholder="请选择" class="layui-hide"/> <script> layui.use(['cascader'], function () { var $ = layui.jquery; var cascader = layui.cascader; cascader.render({ elem: '#demoCascader1', reqData: function (values, callback, data) { // values是当前所有选中的值，data是当前选中的对象 $.get('xxxx.json', { id: data.value }, function(res){ callback(res.data); // 数据请求完成通过callback回调 },'json'); } }); }); </script> ~~~ 异步加载的数据格式为： ~~~ [ {value: 'beijing', label: '北京', haveChildren: true}, {value: 'jiangsu', label: '江苏', haveChildren: true} ] ~~~ 通过haveChildren字段来标识是否还有子节点，如果你的后台数据格式不是这样，可以在callback之前格式化： ~~~ cascader.render({ elem: '#demoCascader1', reqData: function (values, callback, data) { // values是当前所有选中的值，data是当前选中的对象 $.get('xxxx.json', { id: data.value }, function(res){ var newList = []; for(var i=0;i<res.data.length;i++){ var item = res.data[i]; newList.push({ value: item.id, label: item.name, haveChildren: item.haveChildren }); } callback(newList); // 数据请求完成通过callback回调 },'json'); } }); ~~~