# 页面下拉框数据动态 ## 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> ~~~