动态添加<option>元素至select标签后，下拉选择功能失效

嘿，我看了你遇到的问题啦！你现在的问题出在给select绑定的click事件上——每次你点击select（包括展开下拉菜单的那一刻），代码都会先清空所有选项，然后重新创建一遍。这就导致你刚点到某个新添加的option，还没完成选中操作，整个选项列表就被清空重建了，自然没法把选中的文本显示在select框里。

咱们来改改代码，解决这个问题：

问题根源拆解 #

你原来的逻辑是每次点击select就清空重建选项，但点击select展开下拉的动作本身就会触发click事件，这直接打断了选项选中的流程，所以不管点哪个新option都不会生效。

修正方案 #

我们需要换个时机来添加/更新选项，而不是在select的click事件里做这件事。比如可以在页面加载时初始化选项，或者绑定到其他触发条件（比如按钮点击）上，同时用select的change事件来监听选中操作：

修正后的代码

<select id="metodode" style="cursor:pointer;">
  <option value="" disabled selected>Escolha uma opçao</option>
</select>

const selectEl = document.getElementById('metodode');

// 示例：页面加载时初始化额外选项（只执行一次）
function initOptions() {
  // 检查是否已经添加过选项，避免重复创建
  if (selectEl.options.length <= 1) {
    for (let i = 0; i < 5; i++) {
      const elemento = document.createElement('option');
      elemento.text = `test${i+1}`; // 给每个选项加不同的文本，方便区分
      elemento.value = i + 1;
      selectEl.appendChild(elemento);
    }
  }
}

// 页面加载完成后初始化
window.addEventListener('load', initOptions);

// 监听select的选中事件，不需要给单个option加事件
selectEl.addEventListener('change', function() {
  console.log('你选中了：', this.options[this.selectedIndex].text);
});

如果需要动态更新选项（比如根据其他条件变化），可以把更新逻辑绑定到对应的触发事件上，比如一个按钮的点击：

// 假设有个按钮用来更新选项
document.getElementById('updateOptionsBtn').addEventListener('click', function() {
  // 保留默认选项，清空其他选项
  selectEl.innerHTML = '<option value="" disabled selected>Escolha uma opçao</option>';
  
  // 添加新的选项
  for (let i = 0; i < 3; i++) {
    const elemento = document.createElement('option');
    elemento.text = `新选项${i+1}`;
    elemento.value = `new${i+1}`;
    selectEl.appendChild(elemento);
  }
});

额外提示 #

• 不需要给单个<option>绑定click事件，select本身的change事件就能完美监听选中状态的变化
• 尽量避免在select的click/mousedown事件里做清空重建操作，很容易打断原生的下拉选中流程

备注：内容来源于stack exchange，提问作者new221