# 異步加載 ## 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'); } }); ~~~