## 12.9.表格中下拉框數據動態 [模板頁面/列表頁/數據表格](https://demo.easyweb.vip/iframe/page/template/table/table-basic.html) 中展示了表格中下拉框的使用，如何將下拉框的數據變為動態的(來源后端的)： ```javascript var sexList = [{name: '男', value:0}, {name:'女', value: 1}]; var sexHtml = '<div><div class="ew-select-fixed"><select lay-filter="tbBasicTbSexSel">'; layui.each(sexList, function(i,item){ sexHtml += ('<option value="' + item.value + '">' + item.name + '</option>'); }); sexHtml += '</select></div></div>'; /* 渲染表格 */ var insTb = table.render({ elem: '#tbBasicTable', url: '../../../json/user.json', cols: [[ {type: 'checkbox'}, {type: 'numbers'}, {field: 'username', title: '賬號', align: 'center', sort: true}, {field: 'sex', title: '性別', templet: sexHtml, sort: true} ]] }); ``` 如果數據是ajax請求的，應該用同步的請求，或者在請求結束后再渲染表格： ```javascript var insTb, sexList = []; $.get('sex.json', function(res) { sexList = res.data; var sexHtml = '......省略'; /* 渲染表格,......省略具體代碼 */ insTb = table.render({}); }); ``` 如果要回顯選中： ```javascript var insTb, sexList = []; $.get('sex.json', function(res) { sexList = res.data; var sexHtml = '......省略'; /* 渲染表格,......省略具體代碼 */ insTb = table.render({ elem: '#tbBasicTable', url: '../../../json/user.json', cols: [[ {type: 'checkbox'}, {field: 'username', title: '賬號', align: 'center', sort: true}, { field: 'sex', title: '性別', templet: function (d) { var sexHtml = '<div><div class="ew-select-fixed"><select lay-filter="tbBasicTbSexSel">'; layui.each(sexList, function (i, item) { if (d.sex === item.value) { // 這里加selected sexHtml += ('<option selected value="' + item.value + '">' + item.name + '</option>'); } else { sexHtml += ('<option value="' + item.value + '">' + item.name + '</option>'); } }); sexHtml += '</select></div></div>'; return sexHtml; }, sort: true } ]] }); }); ``` <br/>