89 lines
3.3 KiB
JavaScript
89 lines
3.3 KiB
JavaScript
// Function to add dynamic dropdown behavior
|
|
function addDropdownBehavior(section) {
|
|
const accessDropdown = section.querySelector('#access');
|
|
const portInputDiv = section.querySelector('#portInputDiv');
|
|
const dynamicDropdownDiv = section.querySelector('#dynamicDropdownDiv');
|
|
const dynamicDropdown = section.querySelector('#dynamicDropdown');
|
|
|
|
// Event listener for the 'Filter' dropdown
|
|
accessDropdown.addEventListener('change', function() {
|
|
const selectedValue = this.value;
|
|
|
|
if (selectedValue === 'Port') {
|
|
portInputDiv.classList.remove('hidden');
|
|
dynamicDropdownDiv.classList.add('hidden');
|
|
} else if (selectedValue !== '') {
|
|
portInputDiv.classList.add('hidden');
|
|
dynamicDropdownDiv.classList.remove('hidden');
|
|
|
|
// Populate dropdown based on selection
|
|
let options = '';
|
|
if (selectedValue === 'Connectiontype') {
|
|
options = `
|
|
<option value="wifi">WiFi</option>
|
|
<option value="ethernet">Ethernet</option>
|
|
`;
|
|
} else if (selectedValue === 'Subtype') {
|
|
options = `
|
|
<option value="fiber">Fiber</option>
|
|
<option value="dsl">DSL</option>
|
|
`;
|
|
} else if (selectedValue === 'Switch') {
|
|
options = `
|
|
<option value="switchA">Switch A</option>
|
|
<option value="switchB">Switch B</option>
|
|
`;
|
|
}
|
|
dynamicDropdown.innerHTML = options;
|
|
} else {
|
|
portInputDiv.classList.add('hidden');
|
|
dynamicDropdownDiv.classList.add('hidden');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to add event listeners to the plus and minus icons
|
|
function addEventListeners(section) {
|
|
const plusIcon = section.querySelector('.plus');
|
|
const minusIcon = section.querySelector('.minus');
|
|
|
|
// Add dynamic dropdown behavior to the section
|
|
addDropdownBehavior(section);
|
|
|
|
// Plus functionality: clone the section
|
|
plusIcon.addEventListener('click', function() {
|
|
const newClone = section.cloneNode(true); // Clone the current section
|
|
|
|
// Reset input values in the cloned section
|
|
const inputs = newClone.querySelectorAll('input, select');
|
|
inputs.forEach(input => {
|
|
if (input.type !== 'checkbox') {
|
|
input.value = ''; // Clear input fields
|
|
} else {
|
|
input.checked = false; // Uncheck checkboxes
|
|
}
|
|
});
|
|
|
|
// Clear dropdowns to reset the state
|
|
const newAccessDropdown = newClone.querySelector('#access');
|
|
newAccessDropdown.selectedIndex = 0; // Reset to default
|
|
|
|
// Add event listeners to the new cloned section
|
|
addEventListeners(newClone);
|
|
|
|
// Append the new cloned section after the current section
|
|
section.parentNode.appendChild(newClone);
|
|
});
|
|
|
|
// Minus functionality: remove the section
|
|
minusIcon.addEventListener('click', function() {
|
|
if (section.parentNode.childElementCount > 1) { // Ensure at least one section remains
|
|
section.remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize event listeners for the original section
|
|
const dynamicSection = document.querySelector('.dynamic');
|
|
addEventListeners(dynamicSection);
|