如何用Javascript实现选中样本数据后自动填充表单字段功能

实现步骤 #

• 先预设所有下拉选项对应的拆分后地址数据，以下拉框option的value作为key，拆分好的各字段值作为value存储
• 给下拉选择框绑定change事件，用户选择选项时触发填充逻辑
• 读取选中项对应的预设地址数据，将各字段值写入对应表单输入框即可

可直接运行的代码 #

将以下代码插入到页面</body>标签前即可生效：

// 预设样本地址拆分数据，可根据你的实际拆分规则修改
const addressMap = {
  'select-1': {
    street: 'Heilsbronner Strasse 4',
    zip: '91564',
    city: 'Neuendettelsau'
  },
  'select-2': {
    street: '1600 Pennsylvania',
    zip: '20500',
    city: 'Washington',
    state: 'DC'
  },
  'select-3': {
    street: 'Champ de Mars 5 Av. Anatole France',
    zip: '75007',
    city: 'Paris'
  },
  'select-4': {
    street: "1 Queen's Rd W",
    district: 'Sheung Wan',
    city: 'Hong Kong'
  }
}

// 监听下拉框选择事件
const selectEl = document.querySelector('.sample-select')
selectEl.addEventListener('change', () => {
  const selectedVal = selectEl.value
  const streetInput = document.querySelector('.sample-input[placeholder="Street Address"]')
  
  // 选择默认项时清空输入
  if (!selectedVal || !addressMap[selectedVal]) {
    streetInput.value = ''
    // 后续新增字段的清空逻辑可在这里补充
    return
  }

  // 填充对应字段
  const currentAddr = addressMap[selectedVal]
  streetInput.value = currentAddr.street
  // 后续如果新增其他输入框，在这里加赋值逻辑即可，示例：
  // document.querySelector('#city-input').value = currentAddr.city
})

适配扩展说明 #

• 若需要新增更多字段（如城市、邮编、省份），只需在addressMap的每个地址配置中新增对应字段，再在填充逻辑中给对应输入框赋值即可
• 建议给每个输入框设置唯一id，用document.getElementById()匹配输入框，比用placeholder匹配更稳定，不会因为placeholder修改导致代码失效

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