Wheen I update the dropdown list I get thsi:
One list is meant to update another list through Javascript by doing this:
const students = data.success; console.log(students); // now you can access the students list here // and update the options in the select element as needed console.log(students) const studentsSelect = document.getElementById("students"); studentsSelect.innerHTML = ""; for (const student of students) { const option = document.createElement("option"); option.value = student.id; option.text = student.name; studentsSelect.add(option); } let student_list = document.getElementById('students');
If I turn off Materialize styling the list will get updated properly as expected. However, with materialize on the list is always cut off and the options don't appear. I have no idea how to fix this, it should just work like any other dropdown list and expand if you update it in javascript.
Your Environment
- Version used: materialize 1.0.0/css/materialize.min.css
- Browser Name and version: EDGE Version 109.0.1518.78 (Official build) (64-bit) and CHrome Version 109.0.5414.120 (Official Build) (64-bit)
- Operating System and version (desktop or mobile): Windows 10
Wheen I update the dropdown list I get thsi:
One list is meant to update another list through Javascript by doing this:
const students = data.success; console.log(students); // now you can access the students list here // and update the options in the select element as needed console.log(students) const studentsSelect = document.getElementById("students"); studentsSelect.innerHTML = ""; for (const student of students) { const option = document.createElement("option"); option.value = student.id; option.text = student.name; studentsSelect.add(option); } let student_list = document.getElementById('students');If I turn off Materialize styling the list will get updated properly as expected. However, with materialize on the list is always cut off and the options don't appear. I have no idea how to fix this, it should just work like any other dropdown list and expand if you update it in javascript.
Your Environment