选中下拉菜单选项后自动填充多输入框的VanillaJS实现问题

原有代码失效原因 #

• <option>未使用标准value属性存储选项标识，将标识错放在id属性上，无法便捷获取选中项的匹配值
• 未针对不同选项配置差异化填充数据，所有选择触发时都固定给输入框赋值100，无法实现“选不同选项填不同值”的效果
• 代码中引用的Revenue1~Revenue5输入框未在HTML中定义，执行时会因找不到DOM节点报错

完整可运行代码 #

HTML部分 #

<form>
  <select id="choice" name="dropdown">
    <option value="">请选择公司</option>
    <option value="AAPL">Apple</option>
    <option value="NKE">Nike</option>
    <option value="MCD">McDonalds</option>
  </select>

  <!-- 关联填充的输入框 -->
  <div class="revenue-inputs">
    <label>一季度营收：<input type="number" id="Revenue1"></label>
    <label>二季度营收：<input type="number" id="Revenue2"></label>
    <label>三季度营收：<input type="number" id="Revenue3"></label>
    <label>四季度营收：<input type="number" id="Revenue4"></label>
    <label>全年总营收：<input type="number" id="Revenue5"></label>
  </div>
</form>

JavaScript部分 #

// 配置各选项对应的填充值，后续新增/修改数据直接调整此处即可
const revenueDataMap = {
  AAPL: [968, 908, 814, 1196, 3886],
  NKE: [124, 128, 122, 133, 507],
  MCD: [56, 58, 57, 61, 232]
}

const dropdown = document.getElementById('choice')
dropdown.addEventListener('change', function() {
  const selectedCompany = this.value
  // 未选中有效公司时清空所有输入框
  if (!selectedCompany) {
    for (let i = 1; i <= 5; i++) {
      document.getElementById(`Revenue${i}`).value = ''
    }
    return
  }
  // 匹配对应数据批量填充
  const fillValues = revenueDataMap[selectedCompany]
  fillValues.forEach((value, idx) => {
    document.getElementById(`Revenue${idx + 1}`).value = value
  })
})

实现说明 #

• 遵循表单规范，用value存储选项唯一标识，选中时可直接读取，无需额外查询DOM属性
• 数据和逻辑分离，所有填充值统一存在映射对象中，后续新增公司选项、修改填充数值不需要改动事件绑定逻辑
• 增加空选项重置逻辑，避免切换选项时残留旧数据
• 采用循环批量赋值，避免重复书写DOM查询代码，后续调整输入框数量时仅需修改循环范围和映射配置即可

内容的提问来源于stack exchange，提问作者HappyGilmore