# 表格中下拉框数据动态 ## 12.9.表格中下拉框数据动态 [模板页面/列表页/数据表格](https://demo.easyweb.vip/iframe/page/template/table/table-basic.html) 中展示了表格中下拉框的使用，如何将下拉框的数据变为动态的(来源后端的)： ~~~ 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请求的，应该用同步的请求，或者在请求结束后再渲染表格： ~~~ var insTb, sexList = []; $.get('sex.json', function(res) { sexList = res.data; var sexHtml = '......省略'; /* 渲染表格,......省略具体代码 */ insTb = table.render({}); }); ~~~ 如果要回显选中： ~~~ 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 } ]] }); }); ~~~