原生 <input type="month"> 实际渲染为文本框（如“2024-07”），点击唤起月历选择器，非双下拉；因内部结构不可访问、无法注入选项且破坏可访问性，必须改用两个联动 <select> 实现年月双下拉。
HTML5 <input type="month"> 的实际表现
原生 <input type="month"> 并不渲染为「年+月两个下拉框」，而是显示为一个文本输入框（如 2024-07），点击后在 Chrome/Edge 等浏览器中唤起月历式选择器（仅含年份滚动条和月份网格），Firefox 则默认为纯文本输入。它没有提供分离的年/月下拉控件，也不支持自定义下拉样式或 DOM 操作选项。
为什么不能直接用 type="month" 实现双下拉
该类型受浏览器 UA 样式严格限制：<input type="month"> 的内部结构不可访问，<option> 无法注入，::-webkit-calendar-picker-indicator 仅控制小图标，无法拆解为独立年/月控件。试图用 JavaScript 拦截输入、模拟下拉，会破坏可访问性（ARIA 不兼容）且在 Safari 中完全无响应。
真正可用的双下拉年月选择方案
必须放弃原生 type="month"，改用两个独立 <select> + 逻辑联动：
- 年份
<select id="year">：生成 10 年范围（如 2020–2030），value用四位数字（"2024"） - 月份
<select id="month">：固定 12 项，value用两位字符串（"01"–"12"），避免1和01混淆 - 绑定
change事件，组合成 ISO 格式（year + "-" + month），存入隐藏<input type="hidden" name="date_month">提交 - 需要初始化同步：若已有值（如编辑表单），用
substring(0,4)和substring(5,7)拆分并选中对应option
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
document.getElementById('year').value = '2024';
document.getElementById('month').value = '07';
// 组合提交值
const selected = document.getElementById('year').value + '-' + document.getElementById('month').value; // "2024-07"
移动端适配与兼容性注意点
双 <select> 在 iOS Safari 上默认触发原生滚轮选择器（符合预期），但 Android WebView 可能显示为模态列表；需测试目标环境。禁用原生校验（novalidate on <form>），因为 required 对 <select> 的空选项处理不一致。不要依赖 input[type="month"] 的 min/max 属性做范围限制——它对双下拉无效，必须用 JS 控制 <select> 的 disabled 或动态重绘 option。
