dropdowns refactor

static/js/indexListener.js

@@ -7,7 +7,7 @@ document.addEventListener("DOMContentLoaded", function () {
     //const familyGrid = document.getElementById("familyGrid")
 
     // Initialize dropdowns
-    updateMonstersDropdown();
+    updateMonstersDropdownByFamily();
     // Initialize Family Grid();
     // populateFamilyGrid();
 
@@ -21,7 +21,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Listeners for Dropdown Changes
     familyDropdown.addEventListener("change", function () {
-        updateMonstersDropdown();
+        updateMonstersDropdownByFamily();
     });
 
     monsterDropdown.addEventListener("change", function () {
@@ -35,7 +35,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Listener for a click on a breeding parent
     //parent.addEventListener("click", function() {
-    //    updateMonstersDropdown();
+    //    updateMonstersDropdownBySelected();
     //    updateIFrames();  
     //});
 

static/js/updateMonstersDropdownByFamily.js

@@ -1,4 +1,4 @@
-function updateMonstersDropdown() {
+function updateMonstersDropdownByFamily() {
     const selectedFamily = familyDropdown.value;
 
     // Fetch monsters data from the server based on the selected family

static/js/updateMonstersDropdownBySelected.js

@@ -0,0 +1,9 @@
+//function updateMonstersDropdownBySelected() {
+//    const selectedMonster = parent.value;
+//
+//    // Fetch monsters data from the server based on the selected monster
+//    fetch(`/monster/${selectedMonster}`)
+//        .then(response => response.json())
+//        .then(data => populateDropdown(monsterDropdown, data))
+//        .catch(error => console.error("Error fetching monsters:", error));
+//}