如何获取JS动态创建的弹窗下拉菜单的当前选中值？

我尝试将弹窗下拉菜单的选中值存储到变量中，但遇到TypeError: document.getElementById(...) is null错误，找不到mySelect元素。弹窗的所有HTML元素都是通过JS函数创建的，哪怕在创建并设置ID后立即检查，也无法找到该元素。

简化后的关键代码如下：

var genderArray = ["Choose One","Masculine","Feminine","Neuter","Ambiguous","Adjective"];

var pickGender = document.createElement("div");
pickGender.setAttribute("id","pickGender");

// 创建并追加下拉列表
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
selectList.setAttribute("class", "popup");  
pickGender.appendChild(selectList);

for (var i = 0; i < genderArray.length; i++) {
    var option = document.createElement("option");
    option.setAttribute("value", genderArray[i]);
    option.text = genderArray[i];
    selectList.appendChild(option);
}

content.appendChild(heading);
content.appendChild(pickGender);
document.body.appendChild(hostDiv); 

if (document.getElementById("mySelect")){
    console.log("We found it");
} else {
    console.log("Can't find mySelect");
}

解决方法 #

1. 修复DOM挂载的漏洞 #

你代码里的核心问题是content元素没有被添加到hostDiv中，导致包含mySelect的pickGender并没有真正进入DOM树。补上这行代码即可：

// 先把content添加到hostDiv，再挂载到body
hostDiv.appendChild(content);
document.body.appendChild(hostDiv); 

执行这行后，getElementById就能找到目标元素，检查代码会打印"We found it"。

2. 直接复用创建时的变量（最推荐） #

既然创建下拉框时已经保存了selectList变量，完全不需要再通过ID去DOM中查找，直接用这个变量操作更高效可靠，哪怕元素还没挂载到DOM也能访问：

// 直接获取选中值
var chosenGender = selectList.value;

// 监听用户选择变化
selectList.addEventListener('change', function() {
  console.log('当前选中值：', this.value);
});

3. 用MutationObserver监听DOM插入（适配异步场景） #

如果弹窗是异步触发创建的（比如延迟加载、用户点击后才生成），可以用MutationObserver监听DOM变化，当目标元素插入后再执行操作：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const targetEl = document.getElementById('mySelect');
    if (targetEl) {
      console.log('元素已找到，选中值：', targetEl.value);
      // 找到元素后停止监听，避免不必要的性能消耗
      observer.disconnect();
    }
  });
});

// 配置监听：监听body及其子树的节点添加
observer.observe(document.body, { childList: true, subtree: true });

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