Estoy tratando de extraer la opción seleccionada de una columna de tabla creada dinámicamente. El siguiente código funciona para extraer los valores de entrada pero no para los valores desplegables.
Generar HTML dinámicamente
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='Letter"+i+"' type='text' placeholder='Letter' class='form-control input-md' /> </td><td><input name='Start"+i+"' type='text' placeholder='Start' class='form-control input-md'></td><td><input name='End"+i+"' type='text' placeholder='End' class='form-control input-md'></td> <td> <select name='cars' id='cars'><option value='All'>All</option><option value='Even'>Even</option><option value='Odd'>Odd</option></select></td>");codigo javascript
// start from the second row as the first one only contains the table's headers for (let i = 1; i < targetTableRows.length; i++) { var Inventorydict ={} // loop over the contents of each row for (let j = 0; j < targetTableRows[i].cells.length; j++) { // something we could use to identify a given item let currColumn = tableHeaders.cells[j].innerHTML; // the current <td> element let currData = targetTableRows[i].cells[j]; // the input field in the row let currDataInput = currData.querySelector('input'); // is the current <td> element containing an input field? print its value. // Otherwise, print whatever is insside currDataInput ? console.log(`${currColumn}: ${currDataInput.value}`) : console.log(`${currColumn}: ${currData.document.getElementById("addressType")}`); if (currDataInput) { Inventorydict[currColumn.replace(/\s/g, '')] = currDataInput.value; } else { Inventorydict[currColumn.replace(/\s/g, '')] = currData.innerHTML; } }Yo uso esto para obtener los valores de entrada
let currDataInput = currData.querySelector('input');Intenté usar esto para obtener la opción seleccionada
let addresstype = currColumn.getElementById("addressType")Pero no funciona. ¿Cómo puedo obtener la opción desplegable seleccionada?
A currColumn se le está dando un valor en este punto de su código:
let currColumn = tableHeaders.cells[j].innerHTML; La propiedad innerHTML devuelve una cadena, por eso no puede usar querySelector en ella.
En primer lugar, si desea obtener el valor de la select una vez por fila, debe mover esa sección fuera de ese ciclo interno, que recorre cada celda de esa fila.
Luego, deberá obtener una referencia del elemento tr html. Esto debería ser targetTableRows[i] .
Puede obtener su elemento de select utilizando el querySelector en este elemento:
for (let i = 1; i < targetTableRows.length; i++) { var Inventorydict ={} // ... let select = targetTableRows[i].querySelector("select"); let selectValue = select.value; // This will map to the "value" property of the selected option }Sin embargo, tenga en cuenta que realmente debe seleccionar elementos en función de su clase o nombre de entrada, no por su tipo. Además, no debe asignar la misma identificación a varios elementos de su página. Esto le ayudará a evitar errores que serán difíciles de solucionar.