layui下拉框根据其他输入框内容动态隐藏

Layui select 不支持动态隐藏，需通过 DOM 操作+form.render() 实现：隐藏前暂存 lay-verify 并关闭下拉面板，显示时恢复属性与值，每次显隐后调用 form.render('select')，表格内嵌需在 table.done 中处理并清理残留下拉层。

下拉框本身不支持动态 hide，得靠 DOM 操作 + 表单重渲染

Layui 的 select 组件没有内置的「按条件隐藏」能力。所谓“隐藏”，本质是移除或隐藏其 DOM 节点，但必须同步处理表单验证状态，否则会出现：提交时字段被跳过、form.verify() 不校验、再次显示后样式错乱等问题。

常见错误是直接 $("select[name='xxx']").hide() 就完事——这会导致 lay-verify 属性还在，但元素不可见，Layui 验证逻辑会忽略它，且后续 form.render() 无法恢复其交互状态。

1. 隐藏前，把 lay-verify 值暂存到 data-required，再移除该属性
2. 显示时，从 data-required 取回值并重新设为 lay-verify
3. 每次显隐后都必须调用 form.render('select')，否则下拉箭头不出现、选项不响应点击
4. 如果 select 在折叠面板（.layui-collapse）或 tab 页里，还要额外触发 element.init() 确保容器事件绑定

监听其他输入框变化，触发 select 显隐逻辑

典型场景：用户在 #category-input 输入“财务”后，才显示 select[name="dept"]；输其他词或清空时隐藏它。关键不是“联动”，而是“条件控制显隐时机”。

注意：不能只监听 input 事件，要兼顾粘贴、剪切、自动填充等场景，推荐用 input + change 双监听；且需加防抖，避免高频触发导致重复渲染。

1. 用 $('#category-input').on('input change', debounce(fn, 200))，防抖函数自己写或用 setTimeout
2. 判断条件写清楚，比如 if (val === '财务' || val === '人事') { showSelect() } else { hideSelect() }
3. 不要在 showSelect() 里直接 .show()，先检查是否已初始化：if (!$(selectElem).next('.layui-form-select').length) form.render('select')
4. 隐藏时若 select 正在展开下拉面板，需先手动关闭：$('.layui-form-select dd').removeClass('layui-this'); $('.layui-form-select dl').removeClass('layui-show');

select 隐藏后，关联的 lay-verify 和默认值怎么保？

隐藏 select 不等于“取消校验”，尤其当它是必填项时。用户切换条件后又切回来，得保证它的验证规则、初始值、甚至已选中的 option 都不丢。

最稳妥的做法是：不真正移除 DOM，只用 display: none 控制可见性，并维护一个状态映射对象，记录每个 select 当前是否“逻辑启用”。

1. 定义全局状态：const selectStates = { dept: { enabled: false, value: '', verify: 'required' } };
2. 隐藏时保存当前值：selectStates.dept.value = $('select[name="dept"]').val();
3. 显示时还原：$('select[name="dept"]').val(selectStates.dept.value).attr('lay-verify', selectStates.dept.verify);
4. 提交前校验前，先遍历 selectStates，对 enabled: false 的 select 主动跳过验证逻辑，避免干扰

表格内嵌 select 的隐藏更麻烦：得在 done 回调里操作

如果 select 是放在 table.render() 的 templet 里动态生成的（比如每行一个下拉），那它的 DOM 是表格重绘时才创建的。直接在页面加载时找 $('select') 是找不到的。

必须把显隐逻辑放在 done 回调里，且每次重载表格（排序、分页、搜索）后都会触发，否则隐藏效果会在刷新后失效。

1. 在 table.render({ ..., done: function(res) { handleSelectVisibility(res.data) } }) 中执行
2. handleSelectVisibility() 内部用 $('td[data-field="dept"] select') 定位，再逐行判断条件
3. 对每行 select 单独做 hide/show，并对每个都调用 form.render('select') ——注意不是整个表单，是单个 select 实例
4. 表格列宽可能因 select 隐藏/显示而抖动，建议给该列固定 width，避免重排

实际中最容易被忽略的，是隐藏 select 后没清理它的下拉面板 DOM。残留的 .layui-form-select 会遮挡其他元素，且下次点击可能触发旧实例，导致选项错乱或事件绑定重复。每次隐藏前，务必手动清除对应 select 的下拉层。