Trying different methods for dropdown

ui/general/health.html

@@ -66,6 +66,15 @@
             </div>
         </div>
     </div>
+    <select name="droneDropdown" id="droneDropdown" onLoad="handleSelect(this.value)" onChange="handleSelect(this.value)">
+        <option value="View All" selected>View All</option>
+        <option value="Certificates of Deposit (CDs)">Certificates of Deposit (CDs)</option>
+        <option value="Individual Retirement Account (IRA)">Individual Retirement Account (IRA)</option>
+        <option value="Money Market">Money Market</option>
+        <option value="Drone1">Drone1</option>
+        <option value="Checking">Checking</option>
+    </select>
+     <div id="myTableContainer"></div>    
 
 
     <table class="table table-dark">

ui/general/health.js

@@ -3,7 +3,6 @@
 const drone = document.getElementById("drone");
 
 const drones = [
-    // 2.4 GHz Channels
     ["1", "mu1"], ["2", "mu2"], ["3", "mu3"],
     ["4", "mu4"], ["5", "mu5"], ["6", "mu6"]
 ]
@@ -20,6 +19,16 @@ function initPage() {
     addDropDown(drone, drones, currentDrone);
 }
 
+function handleSelect(account) {
+    var drone1Table = "<table><tr><td>test</td></tr></table>";
+    switch(account)
+    {
+        case "Drone1":
+        document.getElementById("myTableContainer").innerHTML = drone1Table
+        break;
+    }
+}
+
 function dockerComposeFileChanged() {
     if (composeFileSelection.value === "") {
         populateEditor("");