54 lines
1.5 KiB
HTML
54 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dynamic Dropdowns</title>
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
<script>
|
|
// Function to add a new dropdown
|
|
function addDropdown() {
|
|
var container = document.getElementById('dropdown-container');
|
|
var dropdown = document.createElement('select');
|
|
|
|
// Populate dropdown options from the collection
|
|
var collection = ["Option 1", "Option 2", "Option 3"]; // Your collection
|
|
for (var i = 0; i < collection.length; i++) {
|
|
var option = document.createElement('option');
|
|
option.text = collection[i];
|
|
dropdown.add(option);
|
|
}
|
|
|
|
container.appendChild(dropdown);
|
|
container.appendChild(document.createElement('br'))
|
|
}
|
|
|
|
// Function to remove the last dropdown
|
|
function removeDropdown() {
|
|
var container = document.getElementById('dropdown-container');
|
|
if (container.children.length > 0) {
|
|
container.removeChild(container.lastChild);
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Dropdowns</h2>
|
|
|
|
<div id="dropdown-container">
|
|
<!-- Initial dropdown -->
|
|
<select>
|
|
<option disabled selected>Select an option</option>
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
<option>Option 3</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button onclick="addDropdown()">Add Dropdown</button>
|
|
<button onclick="removeDropdown()">Remove Dropdown</button>
|
|
|
|
</body>
|
|
</html>
|