JavaScript下拉框添加id属性后无法在其他函数中访问的问题

我来帮你捋捋这个问题哈！你遇到的情况应该是在填充下拉框（dropdown）时给它添加了自定义id属性，但调用弹窗函数时没法获取到这个id值对吧？这大概率是作用域问题或者事件绑定方式不对导致的，下面给你几个常见场景的解决方案：

1. 动态生成Dropdown时直接传递ID到弹窗函数 #

如果是通过JS动态创建并填充Dropdown，你可以在绑定事件的时候，直接把Dropdown的id作为参数传给弹窗函数，这样就能直接拿到啦：

// 填充Dropdown的函数
function populateDropdown() {
  // 创建下拉框元素
  const dropdown = document.createElement('select');
  // 设置自定义ID
  dropdown.id = 'user-specific-id-456';
  
  // 填充选项（示例）
  const option1 = document.createElement('option');
  option1.value = 'opt1';
  option1.textContent = '选项1';
  dropdown.appendChild(option1);
  
  // 绑定change事件，直接传递ID到弹窗函数
  dropdown.addEventListener('change', () => {
    showAlert(dropdown.id);
  });
  
  // 添加到页面
  document.getElementById('container').appendChild(dropdown);
}

// 弹窗函数
function showAlert(elementId) {
  alert(`当前Dropdown的ID是：${elementId}`);
}

2. 用事件委托+事件对象获取ID #

如果你的Dropdown是批量生成的，或者用了事件委托绑定事件，那可以通过event.target或event.currentTarget拿到触发事件的Dropdown元素，进而获取它的id：

// 给父容器绑定事件委托（假设父容器ID是dropdown-container）
document.getElementById('dropdown-container').addEventListener('change', (event) => {
  // 判断触发事件的是目标Dropdown
  if (event.target.tagName === 'SELECT' && event.target.id.includes('custom-')) {
    // 调用弹窗函数并传入ID
    showAlert(event.target.id);
  }
});

function showAlert(elementId) {
  alert(`当前Dropdown的ID是：${elementId}`);
}

3. 利用this关键字获取当前元素的ID #

在事件回调函数里，this默认指向触发事件的DOM元素（注意箭头函数不绑定this，要用普通函数），所以也可以通过this.id直接拿到ID：

function populateDropdown() {
  const dropdown = document.createElement('select');
  dropdown.id = 'my-custom-id-789';
  
  // 填充选项...
  
  // 用普通函数作为事件回调，this指向dropdown
  dropdown.addEventListener('change', function() {
    showAlert(this.id);
  });
  
  document.body.appendChild(dropdown);
}

function showAlert(elementId) {
  alert(`当前Dropdown的ID是：${elementId}`);
}

避坑提醒 #

• 尽量不要用全局变量存储Dropdown的ID，否则如果有多个Dropdown的话，ID会被覆盖，导致逻辑出错。
• 如果用了框架（比如React/Vue），思路类似：通过状态管理或事件参数传递ID，不要直接操作DOM获取。

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