多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 7.2.3.渲染select封装 ```html <select id="sel"></select> <script> layui.use(['formX'],function(){ var formX = layui.formX; // 数据方式 formX.renderSelect({ elem: '#sel', data: [ {id: 1, name: '张三'}, {id: 2, name: '李四'} ], name: 'name', value: 'id', hint: '请选择用户', initValue: 1, done: function() {} }); // 异步方式 formX.renderSelect({ elem: '#sel', data: 'user.json', name: 'name', value: 'id', hint: '请选择用户', done: function(data) {}, method: 'get', where: {page: 20}, header: {token: 'xxx'}, async: true, error: function(xhr, res){} }); }); </script> ``` 基础参数: - elem &emsp; &emsp;&nbsp;&nbsp;要渲染的select - data &emsp; &emsp;&nbsp;&nbsp;&nbsp;数据源,可以是数组,也可以是url - name &emsp; &emsp;&nbsp;显示的字段名称 - value &emsp; &emsp;&nbsp;值的字段名称 - hint &emsp; &emsp;&emsp;未选择提示文字 - initValue &emsp; 默认回显的数据 - done &emsp; &emsp;&nbsp;&nbsp;渲染完成后的回调 - error &emsp; &emsp;&nbsp;&nbsp;data为url时请求失败的回调 - method &emsp; &nbsp;data为url时请求方式 - where &emsp; &nbsp;&nbsp;&nbsp;data为url时请求参数 - header &emsp; &nbsp;&nbsp;data为url时请求header - async &emsp; &emsp;data为url时请求时否是异步 &emsp;后端返回数据格式为`{"data": [], "code": 0}`,data有数据就是请求成功,没有数据就进入error,code等于多少都可以, 如果数据不是对象的形式,name和value可不填: ```javascript formX.renderSelect({ elem: '#sel', data: ['张三','李四'] }); ``` <br/>