Tengo el siguiente código HTML y js donde intento seleccionar el menú desplegable "Plan" usando querySelector('select:last-of-type') pero no puedo seleccionarlo. Siempre está seleccionando el menú desplegable "Género". ¿Alguien puede decirme por qué esto no funciona?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Welcome</title> </head> <body> <table id="table" class="center"> <thead> <th></th> <th>Name</th> <th>Age</th> <th>Gender</th> <th>Plan</th> </thead> <tbody id="tbody"> <tr id="newRow"> <td><input type="checkbox" id="checkbox" /></td> <td><input type="text" id="Name" /></td> <td><input type="number" id="Age" /></td> <td> <select name="Gender" id="Gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> <td> <select name="Plan" id="Plan"> <option value="1 Month">Monthly</option> <option value="3 Months">3 Months</option> <option value="6 Months">6 Months</option> <option value="12 Months">1 Year</option> </select> </td> </tr> </tbody> </table> <script> let dropDown = document.querySelector('select:last-of-type'); console.log(dropDown) </script> </body> </html>:last-of-type seleccionará el último elemento del tipo entre sus "hermanos"
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type
#tbody td:last-of-type select funcionaría, pero no es súper limpio
otra opción que tiene es consultarlos todos y luego tomar el último elemento:
const selectEls = document.querySelectorAll('select') const lastSelect = selectEls.length && selectEls[selectEls.length - 1]¡No puedes usar "último tipo" de esa manera!
Es un comando relativo y solo debe usarse para consultar un tipo particular de etiqueta (en este caso, 'seleccionar') bajo un padre DIRECTO. 'documento' no es un padre directo para 'seleccionar', por lo que se enfrenta a este error.
El código anterior funcionará si consulta el 'td' debajo de la etiqueta 'tr', por ejemplo. (ya que solo hay un padre -etiqueta 'tr'- que contiene la etiqueta 'td')
También olvidó cerrar la segunda etiqueta </td> .