layui select下拉框选项不显示

博主刚开始接触layui框架,开发中遇到诸多问题,现进行整理以便后续查阅。例如,下拉框选项不显示,原因是每次都忘记重新渲染下拉框。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

刚开始接触layui框架 在开发过程中遇到了很多问题 现在整理一下 方便以后查阅

刚开始下拉框选项就是不显示 最后发现每次都忘记重新渲染下拉框

var form=layui.form;
 
form.render("select");

 

### 实现Layui Select组件中的模糊搜索功能 为了实现在Layui `select` 组件中添加模糊搜索的功能,可以利用Layui内置的`lay-filter`事件监听器以及自定义JavaScript逻辑来处理输入框的变化,并通过AJAX请求获取匹配的数据[^2]。 #### HTML结构 首先,在HTML部分创建一个带有特定ID的选择框: ```html <div class="layui-form-item"> <label class="layui-form-label">选择</label> <div class="layui-input-block"> <select id="searchSelect" lay-search="" lay-filter="demo"></select> </div> </div> ``` 这里使用了`lay-search`属性使得该下拉列表能够响应用户的键盘输入并显示过滤后的结果;同时设置了`lay-filter="demo"`以便后续绑定事件处理器。 #### JavaScript初始化与配置 接着,在脚本文件中完成必要的初始化工作及事件绑定: ```javascript layui.use(['form', 'jquery'], function(){ var form = layui.form; var $ = layui.jquery; // 初始化时加载全部数据项 $.getJSON('/api/getOptions', function(data){ var optionsHtml = ''; data.forEach(function(item){ optionsHtml += `<option value="${item.value}">${item.text}</option>`; }); $('#searchSelect').html(optionsHtml); form.render('select'); // 渲染select元素 // 添加change事件监听器用于实时查询 form.on('select(demo)', function(obj){ console.log(obj.elem); // 获取当前被选中的DOM对象 console.log(obj.value); // 获得你所需要的价值 // 如果需要在此基础上做更多事情比如发送Ajax请求更新其他UI组件... }); // 输入变化触发自动补全/筛选 $(document).on('input','#searchSelect',function(e){ let keyword=$(this).val(); if(keyword.length>0){ $.ajax({ url:'/api/searchOption', type:'POST', contentType:"application/json", data:JSON.stringify({query:keyword}), success:function(res){ updateSelectOptions($('#searchSelect'), res.data); form.render('select'); } }) }else{ loadAllOptions(); // 当清空输入框时恢复原始状态 } }) function loadAllOptions() { $.getJSON('/api/getOptions', function(data){ var optionsHtml = ''; data.forEach(function(item){ optionsHtml += `<option value="${item.value}">${item.text}</option>`; }); $('#searchSelect').html(optionsHtml); form.render('select'); }); } function updateSelectOptions($element, newData) { const newOptions = newData.map(option => `<option value="${option.value}" ${option.selected ? "selected" : ""}>${option.text}</option>` ).join(''); $element.html(newOptions); } }); }); ``` 上述代码展示了如何结合服务器端API接口实现基于关键词的即时检索,并刷新`<select>`标签内的选项。每当用户改变输入内容时都会发起新的HTTP POST请求至指定URL `/api/searchOption` 来获取符合条件的结果集,之后再调用辅助函数`updateSelectOptions()` 更新DOM节点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值