# 頁面下拉框數據動態 ## 12.11.頁面下拉框數據動態 演示頁面里面的下拉框之所以都是直接寫的靜態的，是因為實際項目中也可能后端渲染，也可能ajax渲染， 如果是前后端不分離項目建議直接用后端模板引擎渲染，如果是前后端分離方式需要用ajax渲染。 可以頁面一進入就先獲取下拉框的數據： ~~~ <form class="layui-form" lay-filter="userTbSearchForm"> 性別: <select name="sex"></select> </form> <!-- 表單彈窗 --> <script type="text/html" id="userEditDialog"> <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form"> 性別: <select name="sex" lay-verType="tips" lay-verify="required" required></select> </form> </script> <!-- js部分 --> <script> layui.use(['layer', 'form', 'table', 'formX'], function () { var $ = layui.jquery; var layer = layui.layer; var form = layui.form; var admin = layui.admin; var formX = layui.formX; var mSexList = []; // 所有性別 /* 獲取性別數據字典 */ var loadIndex = layer.load(2); admin.req('sys/dictdata', {dictCode: 'sex'}, function (res) { layer.close(loadIndex); if (0 === res.code) { mSexList = res.data; // 渲染搜索欄中的性別select formX.renderSelect({ elem: '[lay-filter="userTbSearchForm"] select[name="sex"]', data: mSexList, name: 'dictDataName', value: 'dictDataId', hint: '請選擇性別' }); } else { layer.msg(res.msg, {icon: 2}); } }); /* 顯示表單彈窗 */ function showEditModel(mData) { admin.open({ type: 1, title: (mData ? '修改' : '添加') + '用戶', content: $('#userEditDialog').html(), success: function (layero, dIndex) { form.val('userEditForm', mData); // 回顯表單數據 // 渲染性別下拉 formX.renderSelect({ elem: '[lay-filter="userEditForm"] select[name="sex"]', data: mSexList, name: 'dictDataName', value: 'dictDataId', hint: '請選擇性別', initValue: mData ? mData.sex : undefined }); } }); } }); </script> ~~~