layui select 选中后需用 form.on('select(name)') 监听，通过 data.value 获取值并映射颜色设 body 背景色，注意 form 模块加载、name 属性匹配及 css 优先级；可结合 localstorage 记住用户选择。
layui select 选中后如何用 change 事件监听并改背景色
直接绑定 change 事件就行，但注意 layui 的 select 是渲染后的 DOM，原生 onchange 不生效，必须用 layui 的 form.on('select(...)') 监听。
常见错误是给 <select></select> 标签写 onchange 或用 jQuery 的 $(...).change()，这两者在 layui 渲染后都无效——因为 layui 把原 select 隐藏了，换成自定义的下拉结构。
- 必须等
layui.use(['form'], ...)加载完成再绑定 - 监听时要传入
select元素的name属性值（不是 id），例如<select name="theme"></select>就写form.on('select(theme)', ...) - 回调函数里通过
data.value拿到当前选中的值，别用$(this).val()
如何根据选项值设置不同背景色（含颜色映射逻辑）
不能硬写一堆 if/else，建议用对象做颜色映射，清晰且易维护。比如深色主题设为 #1e1e2e，浅色设为 #ffffff，蓝色系设为 #4a6fa5。
注意：直接改 document.body.style.backgroundColor 最简单，但如果页面有过渡动画或需要复原，得先缓存原始色值；另外某些 CSS 框架（如 AdminLTE）可能用 class 控制主题，这时更适合切换 class 而非内联样式。
form.on('select(theme)', function(data){
const colorMap = {
'dark': '#1e1e2e',
'light': '#ffffff',
'blue': '#4a6fa5',
'default': ''
};
const bgColor = colorMap[data.value] || colorMap.default;
document.body.style.backgroundColor = bgColor;
});
为什么页面背景没变？检查这三点
90% 的“不生效”问题出在这几个地方：
-
form模块没加载：layui.use(['form'], function(){...})忘了包一层，或漏写form在依赖数组里 -
select缺少name属性，或者name值和form.on('select(xxx)')里的字符串不一致（大小写、空格、下划线都要完全匹配） - CSS 优先级覆盖：如果 body 上有
!important的背景色，或外层容器（如.layui-layout-body）设置了背景且高度占满，实际看到的可能不是 body 的背景
进阶：配合 localStorage 记住用户上次选择
用户刷新页面后背景色重置，体验差。可以在 change 回调里把选中值存进 localStorage，并在页面加载完、layui 初始化前就先读取并设色。
关键点：设色操作要在 layui.use 外提前执行，否则会闪一下白底；同时记得在 form.on 里同步更新 storage，保持一致性。
// 页面加载时立即应用上次选择
const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) {
document.body.style.backgroundColor = {
'dark': '#1e1e2e',
'light': '#ffffff',
'blue': '#4a6fa5'
}[savedTheme] || '';
}
// 后续监听变更并保存
form.on('select(theme)', function(data){
localStorage.setItem('selectedTheme', data.value);
// ... 设置背景色
});
layui 的表单组件对 DOM 操作做了封装，绕过它直接操作原生元素大概率失败；真正要改的不是 select 本身，而是它触发的语义行为——选中即代表用户意图，这个意图需要用 form.on 捕获，而不是盯着那个被隐藏的 <select></select> 标签。
