自定义下拉选择器图片异常求助：选国家码时图片显示undefined

你的判断没错，问题核心就在这行代码：

let text = images[el] + i.textContent

错误原因： #

1. images.forEach(el => {})中的el是DOM元素对象，不是数组索引，images[el]会返回undefined，因为数组索引只能是数字类型。
2. 遍历所有images完全没必要，你只需要获取当前点击的select__item里的图片和文本内容。
3. 使用innerText会把HTML标签（比如<img>）当成纯文本解析，无法正常渲染图片。

修复后的JavaScript代码： #

let header = document.querySelectorAll('.select__header')
let items = document.querySelectorAll('.select__item')
let select = document.querySelector('.select')

header.forEach(headerEl => {
  headerEl.addEventListener('click', () => {
    headerEl.parentElement.classList.toggle('active')
  })
})

items.forEach(item => {
  item.addEventListener('click', () => {
    // 获取当前点击项里的图片元素和号码文本
    const itemImg = item.querySelector('img');
    // 复制图片元素，避免修改原列表中的DOM
    const clonedImg = itemImg.cloneNode(true);
    const codeText = item.textContent.trim();
    
    const currentText = select.querySelector('.select__current');
    // 清空原有内容，重新添加图片和号码
    currentText.innerHTML = '';
    currentText.appendChild(clonedImg);
    currentText.appendChild(document.createTextNode(` ${codeText}`));
    
    select.classList.remove('active');
  })
})

关键改动说明： #

• 移除了无意义的images遍历逻辑，直接从当前点击的item中获取对应资源。
• 使用cloneNode(true)复制图片元素，避免影响下拉列表里的原图片。
• 改用innerHTML配合appendChild组合图片与文本，确保图片能正常渲染。
• 用trim()清理文本前后的空白，让显示效果更整洁。

额外优化建议： #

• 变量名调整为更语义化的命名（比如item改为items，符合复数集合的命名习惯）。
• 原代码中单独声明的images变量可以删除，因为现在不需要单独获取所有图片元素了。

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