表单选中UserID后如何在下方展示对应的用户Firstname

你可以通过给下拉框绑定值变化事件，配合ID-姓名映射表实现需求，完整修改代码如下：

1. 修改原有HTML结构 #

给下拉框新增ID方便JS获取，同时在表单下方新增姓名展示容器：

<select id="userIdSelect">
    <option value="">Tabs User</option>
    <option value="ID3357">ID3357</option>
    <option value="ID2695">ID2695</option>
    <option value="ID1072">ID1072</option>
    <option value="ID1306">ID1306</option>
    <option value="ID2702">ID2702</option> 
</select>
<p>对应Firstname：<span id="firstNameDisplay"></span></p>

2. 添加JS联动逻辑 #

在页面底部添加以下JS代码即可实现效果：

// 定义ID与Firstname的映射关系
const userMapping = {
  "ID2695": "Jacob",
  "ID1072": "Moe",
  "ID1306": "sara",
  "ID2702": "Sam"
}

// 获取DOM元素
const selectEl = document.getElementById('userIdSelect')
const displayEl = document.getElementById('firstNameDisplay')

// 绑定下拉框值变化事件
selectEl.addEventListener('change', function() {
  const selectedId = this.value
  if (!selectedId) {
    displayEl.textContent = ''
    return
  }
  displayEl.textContent = userMapping[selectedId] || '未匹配到对应姓名'
})

// 可选：页面加载完成后自动触发一次，显示默认选中项的对应内容
selectEl.dispatchEvent(new Event('change'))

如果你的项目用了jQuery，也可以用jQuery的语法实现，逻辑完全一致。

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