layui下拉框渲染后需通过原始元素（如document.getelementbyid('myselect').options）获取option集合，因其虽被隐藏但始终存在且实时有效；不可用$('select').find('option')等误匹配伪dom。
layui下拉框的 DOM 元素怎么拿到
layui 的 select 组件渲染后，原始 <select></select> 标签会被隐藏，真实可操作的 DOM 是它生成的模拟下拉结构（.layui-select-title、.layui-select-box 等）。所以不能直接用 document.querySelector('select').options——原生 options 集合虽然还在，但已不反映 UI 状态，且 layui 不会同步更新它。
真正要获取“所有 option 的集合”，得回到原始 <select></select> 元素本身。只要没手动销毁或替换它，这个元素一直存在，只是被 display: none 了。
实操建议：
- 给
<select></select>加一个明确的id或class，比如<select id="mySelect"></select> - 用原生方式获取：
document.getElementById('mySelect').options，返回的就是标准的HTMLOptionsCollection - 如果用了 layui 表单重载（
form.render()），原始select的options仍有效，无需重新查
用 jQuery 获取所有 option 时要注意什么
如果你项目里混用了 jQuery，别写 $('select').find('option')——这会匹配到 layui 渲染出的模拟 li 元素（它们不是真正的 option），导致结果错乱。
正确做法是显式定位原始 select 元素：
-
$('#mySelect option')—— 依赖 ID 最稳 -
$('select[name="city"]').get(0).options—— 先取原生 DOM 再读options集合 - 避免
$('body').find('option')，会扫到所有 select（包括未初始化的、动态插入的）
动态添加 option 后怎么让 layui 下拉同步显示
直接往原始 select 里 append 新 option，layui 默认不会自动刷新下拉面板。用户点开还是旧内容。
必须手动触发重新渲染：
- 新增完 option 后，调用
form.render('select')（全局重载所有 select） - 或者更精准：只重载某个 select，用
form.render('select', 'your-filter')，其中'your-filter'是该 select 所在 form 的lay-filter值 - 注意：不要调用
form.render()不带参数，它会重载全部表单组件，可能影响性能
示例：
const sel = document.getElementById('mySelect');
const opt = new Option('新城市', 'new-city');
sel.add(opt);
form.render('select', 'search-form');
为什么遍历 options 时 value 总是空字符串
常见错误是没给 option 设置 value 属性，只写了 innerText。例如：<option>北京</option> → 此时 option.value 是空字符串，option.text 才是 “北京”。
layui 提交表单时也依赖 value，所以务必显式设置：
- 静态写法：
<option value="beijing">北京</option> - JS 创建：
new Option('北京', 'beijing')（第二个参数即 value） - 动态添加后检查：
Array.from(sel.options).forEach(o => console.log(o.value, o.text))
原始 select 的 options 集合是实时的，但它的行为完全遵循 HTML 规范——没设 value 就为空，这点和 layui 无关，也绕不过去。
