Tengo un problema en una función simplemente js. Tengo una página web donde muestro registros en una tabla, y cuando hago clic en un ícono (que significa "cambiar este registro"), esa celda de la tabla debe reemplazarse con un menú desplegable en el que el usuario puede seleccionar el nuevo valor para ese registro basado en los disponibles.
Lo intenté de muchas maneras:
function clickOnModifyProfessor(id, professors) { let select = document.createElement("select"); select.setAttribute("id", id); for (let i = 0; i < professors.length; i++) { let el = document.createElement("option"); el.textContent = professors[i]['name'] + " " + professors[i]['surname']; el.value = professors[i]['professorID']; select.appendChild(el); } //I set id=2 simply to test with one specific record, if it works I'll just set another parameter to generalize the change. const node = document.getElementById("2"); node.textContent = ''; node.appendChild(select); }Con este código solo obtengo la celda de la tabla vacía después de hacer clic en el botón modificar, pero lo extraño es que si trato de crear otro elemento (área de texto, contraseña, etc.) funciona perfectamente, así que no puedo entender por qué hace esto. solo con el elemento seleccionado. También probé creando toda la selección con elementos de opción y llevándola a la celda de la tabla por el HTML interno, pero no funciona (como antes, funciona con otros elementos que no son 'seleccionados').
Si puede ayudar, aquí está el fragmento de código donde llamo a esta función:
echo "<tr><td>" . $row['subjectName'] . "</td> <td id='" . $rowsCount . "'> <p>" . $row['profName'] . " " . $row['profSurname'] . " <i class='material-icons' onclick='clickOnModifyProfessor(" . json_encode($row['subjectName'], JSON_HEX_APOS) . "," . json_encode($professors, JSON_HEX_APOS) . ")'>create</i> </p> </td> </tr>"; PD: también traté de imprimir en la consola document.getElementById(id).innerText después de agregar el nuevo elemento 'seleccionar' al documento e imprime correctamente las opciones que agregué.
¿Estoy cometiendo un error? Espero que sea lo suficientemente claro.
Respondo mi propia pregunta con la solución que encontré, tal vez pueda ser útil para alguien.
El problema es que la selección de materializar css no se puede representar en el navegador sin iniciar js antes, por lo que es necesario agregar class='browser-default' cuando creamos el elemento de selección o, si queremos materializar el estilo de selección de css, necesitamos para usar $('select').formSelect(); después de que se haya creado el elemento seleccionado con sus opciones.