Creo un cuadro de selección dinámicamente a través de un detector de eventos.
<select name="s" id="s"></select>
se convierte
<select name="s" id="s"><option value=1>1</option><option value=2>2</option>
<option value=3 selected="true">3</option></select>
Luego llamo a una función js para obtener el valor seleccionado. Sin embargo, falla, la longitud de la colección html de las opciones seleccionadas es 0. Pero cuando amplío la colección, puedo ver el valor seleccionado 0:<option value=3 selected=true> Si trato de obtener el valor, falla e.selectedOptions[0].value Si hago que el menú desplegable sea estático. Soy capaz de recuperar el valor.
e = document.querySelector('#s');
console.log(e.selectedOptions)
Creé el mismo escenario con respecto a su problema, puede verificar esto simplemente usando document.getElementById
const form = document.getElementById("form");
const selectField = document.createElement("select");
selectField.setAttribute("id", "s");
// iterate the option/s
for(let i= 1; i <= 3; i++){
const option = document.createElement("option");
option.setAttribute("value", i);
option.innerText = i;
selectField.append(option);
}
// append the dynamic select field into div form as an example parent
form.append(selectField);
// this get the values from your dynamic select field
document.getElementById("s").onchange = function(e){
console.log("value", e.target.value)
}
example:
Input: select option 2
Output: "2"
mi fuente: https://jsfiddle.net/d4q7mugh/12