Динамическое добавление элементов для выбора тега разрушает его функциональность ⇐ Html

[Anonymous]

Я пытаюсь динамически добавлять параметры в тег выбора на основе определенных условий
https://jsfiddle.net/kvnhdpyg/
< div class="snippet">

Код: Выделить всё

document.getElementById('metodode').addEventListener('click', function(e) {

this.innerHTML = '';
const elemento = document.createElement('option');
elemento.text = 'Escolha uma opçao';
elemento.value = '';
elemento.disabled = true;
elemento.selected = true;
this.appendChild(elemento);

for (let i = 0; i < 5; i++) {

const elemento = document.createElement('option');
elemento.text = "test123"

this.appendChild(elemento);
}
});

Код: Выделить всё

Escolha uma opçao

вот его краткая версия, в которой динамически добавляются теги опций для выбора разрушает его функциональность, нажатие на теги динамических параметров не помещает его текст в тег выбора, как это было бы с обычными тегами параметров.
Я также пробовал добавлять прослушиватели событий, но это не помогает не работает, я могу console.log() их, но нет нажмите

Подробнее здесь: https://stackoverflow.com/questions/793 ... ctionality