layui下拉框去重必须操作原始select的option节点并调用form.render()。错误做法是直接删伪dom的dd,正确流程是先用set去重option,再显式调用form.render('select', 'filter值'),且filter需与lay-filter完全一致。

layui下拉框重复数据必须从原始 select 的 option 入手
layui 渲染后生成的 .layui-form-select 是伪 DOM,直接操作它里面的 dd 或 dl 不会真正删掉选项,表单提交时仍会带上重复值。所有去重动作必须落在原始 select 标签内的 option 节点上,否则白忙活。
- 错误写法:
$(".layui-form-select dd[lay-value='abc']").remove()—— 只删了视觉层,select里还留着 - 正确路径:先处理
select#mySelect option,再调form.render('select') - 如果用了
lay-search,重复项会在搜索时被放大显示,但根源仍是原始option未清理
用 Set + map 去重原始 option(推荐)
比字符串拼接更稳定,不依赖 outerHTML 的格式一致性,也避开 jQuery 的 DOM 序列化差异问题。
- 先提取所有
option的value和文本,用Set去重value(或text,按业务定) - 保留第一个出现的
option,其余remove() - 示例代码:
const selectEl = document.querySelector('#mySelect');
const options = Array.from(selectEl.querySelectorAll('option'));
const seenValues = new Set();
options.forEach(opt => {
if (seenValues.has(opt.value)) {
opt.remove();
} else {
seenValues.add(opt.value);
}
});
layui.form.render('select');
动态加载场景下,去重必须同步数据源
如果下拉框是通过接口返回数组渲染的(比如 result.map(item => <option value="${item.id}">${item.name}</option>)),光清 DOM 不够——下次刷新或重新加载,重复项又回来了。
- 把原始数据存到变量里,如
window.categoryList = [] - 去重时先对这个数组调
filter()或Map去重,再重新生成option - 别用
$.get('/api/list', ...)拿完就直接 append,中间缺个去重层 - 注意后端返回的
id类型:若为数字,option[value=5]在 jQuery 中可能匹配不到字符串"5",建议统一转成字符串比较
form.render('select') 必须显式调用,且 filter 参数要对得上
很多人写了去重逻辑,但 UI 没变,是因为忘了这一步,或者参数写错了。
-
form.render('select')不带参数会重绘全页所有 layui 表单,性能差;应指定 filter:form.render('select', 'searchForm') - 第二个参数必须和
form标签的lay-filter="searchForm"完全一致,大小写、空格都不能错 - 如果没设
lay-filter,可用form.render('select')全局重绘,但不推荐 - 去重后若下拉标题文字没更新,大概率是
form.render()没生效,检查控制台是否报 “not find form” 类错误
form.render('select', 'xxx')。这两步缺一不可,且顺序不能颠倒。











