Trying to get values to appear for bootstrap dropdowns

This commit is contained in:
Alice Sedgwick 2024-11-11 13:04:12 -05:00
parent 01a2ada810
commit beef00e14a
2 changed files with 32 additions and 5 deletions

View File

@ -5,6 +5,7 @@
<title>Health Status</title> <title>Health Status</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="../base1/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="../base1/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="../base1/cockpit.js"></script> <script src="../base1/cockpit.js"></script>
<script src="../base1/jquery-3.7.1.min.js"></script> <script src="../base1/jquery-3.7.1.min.js"></script>
</head> </head>
@ -62,17 +63,27 @@
<label for="composeFile" class="form-label"><b>Drone Select</b></label> <label for="composeFile" class="form-label"><b>Drone Select</b></label>
<select id="droneSelection" class="form-select mt-2"></select> <select id="droneSelection" class="form-select mt-2"></select>
</div> </div>
<ul class="nav nav-pills span7 pull-right" id="upper_username_hide">
<li class= "dropdown" data-dropdown="dropdown">
<a id="" class="dropdown-toggle" data-toggle="dropdown" href="#">
<b class="caret dropdown-toggle"></b>
</a>
<ul class="dropdown-menu" >
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<select name="droneDropdown" id="droneDropdown" onLoad="handleSelect(this.value)" onChange="handleSelect(this.value)"> <select name="droneDropdown" id="droneDropdown" onLoad="handleSelect(this.value)" onChange="handleSelect(this.value)">
<option value="View All" selected>View All</option> <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="Drone1">Drone1</option>
<option value="Checking">Checking</option> <option value="Drone2">Drone2</option>
<option value="Drone3">Drone4</option>
<option value="Drone5">Drone5</option>
</select> </select>
<div id="myTableContainer"></div> <div id="myTableContainer"></div>

View File

@ -20,12 +20,28 @@ function initPage() {
} }
function handleSelect(account) { function handleSelect(account) {
var drone1Table = "<table><tr><td>test</td></tr></table>"; var drone1Table = "<table><tr><td>Drone1</td></tr></table>";
var drone2Table = "<table><tr><td>Drone2</td></tr></table>";
var drone3Table = "<table><tr><td>Drone3/td></tr></table>";
var drone4Table = "<table><tr><td>Drone4</td></tr></table>";
var drone5Table = "<table><tr><td>Drone5</td></tr></table>";
switch(account) switch(account)
{ {
case "Drone1": case "Drone1":
document.getElementById("myTableContainer").innerHTML = drone1Table document.getElementById("myTableContainer").innerHTML = drone1Table
break; break;
case "Drone2":
document.getElementById("myTableContainer").innerHTML = drone2Table
break;
case "Drone3":
document.getElementById("myTableContainer").innerHTML = drone3Table
break;
case "Drone4":
document.getElementById("myTableContainer").innerHTML = drone4Table
break;
case "Drone5":
document.getElementById("myTableContainer").innerHTML = drone5Table
break;
} }
} }