本文讲解如何监听文本输入框变化，提取用户输入数值的首位数字，并据此自动更新关联的 <select> 下拉菜单的选中值，解决因变量作用域、事件时机和逻辑调用错误导致的功能失效问题。
本文讲解如何监听文本输入框变化，提取用户输入数值的首位数字，并据此自动更新关联的 `
在 Web 表单交互中，常需根据一个输入字段（如薪资）的数值特征，动态预设另一个控件（如品牌选择）的状态。但初学者易陷入“一次性取值”陷阱：将输入值在脚本加载时就固化为常量，导致后续输入变更无法触发响应。以下是实现该功能的专业写法与关键要点。
✅ 正确实现逻辑
核心原则是：所有依赖用户输入的计算，必须在事件触发时实时执行。因此：
- #salary 应仅保存 DOM 元素引用，而非 .value；
- firstDigit() 函数不再接收参数，而是内部读取 salary.value；
- firstNumSalary 必须在 changeBrandValue 事件处理函数内重新计算，确保反映最新输入；
- 注意修复原代码中未定义的变量 num（应为 digit），避免运行时错误。
以下是完整可运行代码：
<label for="brands">Choose a brand:</label> <select name="brands" id="brands"> <option value="ford">Ford</option> <option value="audi">Audi</option> <option value="nissan">Nissan</option> <option value="opel">Opel</option> <option value="mercedes">Mercedes</option> </select> <label for="salary">Your salary:</label> <input type="text" name="salary" id="salary">
const salary = document.querySelector('#salary');
const brand = document.querySelector('#brands');
function firstDigit() {
const valueStr = String(salary.value).trim();
if (!valueStr) return null;
// 匹配首个数字字符（支持负号前缀）
const match = valueStr.match(/[-+]?\d/);
if (!match) return null;
const digit = Number(match[0]);
// 若匹配到负号+数字（如 "-6"），match[0] 是 "-6"，Number("-6") = -6 → 取绝对值首位
return Math.abs(digit);
}
salary.addEventListener('input', () => {
const firstNum = firstDigit();
if (firstNum === 1) {
brand.value = 'ford';
} else if (firstNum === 6) {
brand.value = 'mercedes';
} else {
// 可选：清除或设为默认值，避免残留
brand.value = '';
}
});⚠️ 注意事项与增强建议
- 使用 input 而非 change 事件：change 仅在失焦后触发，而 input 实时响应每键输入，体验更流畅；
- 健壮性处理：添加空值、非数字输入、负数等边界判断（如 trim() 和 match 存在性校验）；
-
扩展性设计：可将映射关系抽离为对象，便于维护：
const digitToBrand = { 1: 'ford', 6: 'mercedes', 9: 'audi' }; if (digitToBrand[firstNum] !== undefined) { brand.value = digitToBrand[firstNum]; } - 无障碍友好：确保 <label> 的 for 属性与对应元素 id 一致，已满足。
通过以上重构，代码不仅修复了原始逻辑缺陷，还提升了可读性、鲁棒性和可维护性，适用于生产环境中的动态表单联动场景。
