layui select 直接请求数据

闲话少说,直接上代码

示例如下

  <select name="store_id" id="storeId"  lay-filter="buildingFilter" data-select="{:url('management.store/getstore')}" data-fields="store_id,store_name"></select> 

data-select 写请求方法

data-fields 要显示的字段

data-value 编辑的时候赋值

编辑示例

  <select name="store_id" id="storeId" data-value="{$row.store_id}"  lay-filter="buildingFilter" data-select="{:url('management.store/getstore')}" data-fields="store_id,store_name"></select> 

不洗勿喷!!!个人开发中遇到的问题,也许你可能会遇到

### layui Select 动态加载数据实现方法 在 Layui 中,可以通过 `form.render()` 方法重新渲染表单元素以更新动态加载的数据。以下是基于提供的引用以及常见实践的具体实现方式。 #### 使用 AJAX 请求动态加载数据 通过 AJAX 获取服务器端返回的 JSON 数据并将其填充到 `<select>` 下拉框中: ```javascript // 假设存在一个名为 'dynamicSelect' 的 select 元素 layui.use(['form', 'jquery'], function() { var form = layui.form; var $ = layui.jquery; $.ajax({ url: '/api/getOptions', // 替换为实际接口地址 type: 'GET', success: function(res) { if (res.code === 0) { // 判断请求成功状态码 var optionsHtml = ''; res.data.forEach(function(item) { optionsHtml += '<option value="' + item.value + '">' + item.text + '</option>'; }); $('#dynamicSelect').html(optionsHtml); // 更新 select 内容 form.render('select'); // 重新渲染 select 组件[^1] } }, error: function(xhr, status, error) { console.error('Error loading data:', error); } }); }); ``` 上述代码展示了如何利用 AJAX 加载远程数据,并将这些数据作为选项插入到指定的 `<select>` 元素中。最后调用了 `form.render('select')` 来触发组件重绘操作[^3]。 #### 结合模板引擎 Template 渲染 Option 如果希望更灵活地处理复杂结构或者需要额外逻辑支持,则可以借助 Layui 提供的 `template` 模块完成此任务: ```javascript layui.use(['form', 'jquery', 'tpl'], function(){ var form = layui.form, tpl = layui.tpl, $ = layui.jquery; $.get('/api/templateData', function(templateRes){ if (!templateRes.success || !Array.isArray(templateRes.options)) return ; let templateStr = '{{ d.options | toOptions }}'; // 自定义过滤器函数用于生成 HTML 字符串 tpl.filters.toOptions = function(items){ return items.map(i => `<option value="${i.id}">${i.name}</option>`).join(''); }; const renderedHTML = tpl(templateStr, {options: templateRes.options}); $("#targetSelect").append(renderedHTML); form.render(); // 完成最终渲染过程[^2] }); }); ``` 这里采用了自定义过滤器的方式简化了字符串拼接流程,同时也体现了模板驱动开发的优势所在。 --- ### 注意事项 - 确认项目已正确引入所需资源文件(如 jQuery 和 Layui 库),否则可能导致功能失效。 - 如果遇到首次点击无响应的情况,请核查网络延迟或服务端性能瓶颈等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值