time输入框的value必须为“HH:MM”或“HH:MM:SS”格式，且需带前导零；select选项value须严格匹配该格式；change事件监听最稳妥；反向联动需校验time.value合法性；移动端无需主动focus。
time 输入框的 value 值必须是 24 小时制字符串
HTML 的 <input type="time"> 默认只接受 "HH:MM" 或 "HH:MM:SS" 格式，比如 "09:30"、"14:45:20"。如果给它赋值 "9:30"（缺少前导零）或 "9:30 AM"，浏览器会直接清空或忽略该值，表现为输入框变为空白——这是最常见的联动失败原因。
下拉框（<select>）选项的 value 必须严格匹配这个格式，不能带空格、AM/PM、中文单位，也不能省略前导零。
- ✅ 正确：
<option value="08:00">早上 8 点</option> - ❌ 错误：
<option value="8:00">早上 8 点</option>（少前导零） - ❌ 错误：
<option value="8:00 AM">早上 8 点</option>（含 AM）
用 change 事件监听 select，再赋值给 time 输入框
change 是最稳妥的监听时机：用户选完就触发，且只在真实改变后触发一次，比 input 或 click 更干净。注意不要用 onclick，它会在点击未真正切换选项时也触发，导致 value 被错误覆盖。
赋值时直接写 timeInput.value = selectedValue 即可，不需要额外格式化——前提是 selectedValue 已是合法格式。
立即学习“前端免费学习笔记（深入）”；
<select id="timeSelect">
<option value="">请选择时间</option>
<option value="09:00">上午 9 点</option>
<option value="13:30">下午 1:30</option>
</select>
<input type="time" id="timeInput">
<script>
const select = document.getElementById('timeSelect');
const timeInput = document.getElementById('timeInput');
select.addEventListener('change', () => {
timeInput.value = select.value; // 直接赋值，不加任何处理
});
</script>
需要反向联动？注意 time 输入框的 change 事件有兼容性差异
当用户手动修改 <input type="time"> 后，想同步更新下拉框选中项，得监听它的 change 事件。但要注意：Safari 在用户未离开焦点（比如没点其他地方）时，可能不触发 change；而 Chrome/Firefox 通常在失去焦点或确认选择后才触发。
如果要求“实时响应”，可监听 input 事件，但它会在用户每按一个键都触发（比如输入 "1" → "12" → "12:"），此时 timeInput.value 可能是空字符串或非法值，需加校验：
- 检查
timeInput.value.length === 5（如"12:30"）且包含: - 用正则
/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(timeInput.value)初步验证 - 避免把非法中间态（如
"9:"）同步到 select 中，否则下拉框会跳回默认项
移动端键盘弹出后无法自动聚焦 time 输入框
在 iOS Safari 或部分安卓浏览器中，点击 <input type="time"> 后系统时间选择器弹出，但此时 focus() 或 click() 调用无效，甚至可能引发页面滚动异常。所以别试图在 select 改变后主动 timeInput.focus() —— 用户本来就没法在时间选择器里输错，也不需要手动聚焦。
真正要做的，只是确保 value 同步正确。如果业务上必须强调“已设置”，可用 CSS 高亮 timeInput 边框，或加个微小状态提示，而不是强行抢焦点。
联动本身很简单，难的是对齐格式、处理边界输入、以及尊重不同平台的时间控件行为。稍不注意，就会出现“看着选了，但实际没生效”的情况。
