HTML:
<table> <tr> <th>Student Name</th> <th>Student Grades</th> </tr> <tr> <td> <select name="dropdown" id="dropdown"> <option> - </option> <option id = "StudentA"> Student A </option> <option id = "StudentB"> Student B </option> </select> </td> <td></td> <td></td> </tr> <tr> <td> <select name="dropdown" id="dropdown"> <option> - </option> <option id = "StudentA"> Student A </option> <option id = "StudentB"> Student B </option> </select> </td> <td></td> <td></td> </tr> </table>JSON:
{"students": [ {"studentName" : "studentA", "studentGrades" : "gradeC"}, {"studentName" : "studentB", "studentGrades" : "gradeA+"}, ] }¿Cómo hacer que cuando seleccione una opción desplegable del estudiante A, las calificaciones de los estudiantes se muestren automáticamente en la tabla?
Solo analicé el texto de respuesta e hice un registro de la consola y lo hice. Tengo a todos los estudiantes en el registro de la consola, pero no estoy exactamente seguro de cómo hacerlo con el menú desplegable de opciones de selección.
Puede probar el siguiente enfoque para lograr esto. Agregue un evento onchange en la etiqueta de selección y, según la opción seleccionada, actualice la columna de calificaciones.
Código de trabajo completo:
const data = { "students": [{ "studentName": "studentA", "studentGrades": "gradeC" }, { "studentName": "studentB", "studentGrades": "gradeA+" }, ] } function showGrades() { const dropdowns = document.querySelectorAll('#dropdown') dropdowns.forEach(dropdown => { const selectedVal = dropdown.options[dropdown.selectedIndex].id const formattedVal = selectedVal.charAt(0).toLowerCase() + selectedVal.slice(1) const grades = data.students.map(item => { if (item.studentName == formattedVal) { dropdown.parentElement.parentElement.children[1].innerText = item.studentGrades; } }) }) } <table> <tr> <th>Student Name</th> <th>Student Grades</th> </tr> <tr> <td> <select name="dropdown" id="dropdown" onchange="showGrades()"> <option> - </option> <option id="StudentA"> Student A </option> <option id="StudentB"> Student B </option> </select> </td> <td></td> </tr> <tr> <td> <select name="dropdown" id="dropdown" onchange="showGrades()"> <option> - </option> <option id="StudentA"> Student A </option> <option id="StudentB"> Student B </option> </select> </td> <td></td> </tr> </table>Espero que así es como querías que funcionara.
Puede lograrlo activando un evento onchange en select y luego filtrando la matriz de estudiantes usando el método Array.filter() para obtener la opción seleccionada studentGrade .
Demostración de trabajo:
const obj = { "students": [ {"studentName" : "studentA", "studentGrades" : "gradeC"}, {"studentName" : "studentB", "studentGrades" : "gradeA+"}, ] }; function getGrades() { const selectedOption = document.getElementById('dropdown').value; document.getElementById('studentGrade').innerHTML = obj.students.find((obj) => obj.studentName === selectedOption).studentGrades; } <table> <tr> <th>Student Name</th> <th>Student Grades</th> </tr> <tr> <td> <select name="dropdown" id="dropdown" onchange="getGrades()"> <option> - </option> <option value="studentA"> Student A </option> <option value="studentB"> Student B </option> </select> </td> <td id="studentGrade"></td> </tr> </table>