javascript - Getting problems in selecting options in a Dropdown - Stack Overflow

admin管理员组

文章数量:1188224

This is the part I use to dynamicly create a Dropdown.

// Helper: Create Dropdown
const createDropdown = (id, options, selectedOption = [], labelText, isMultiSelect = false) => {
  console.log(`Creating dropdown for ${labelText} with ID: ${id}`);
  console.log(`Initial selectedOption:`, selectedOption);
  console.log(`Options provided:`, options);
  console.log(`Multi-select: ${isMultiSelect}`);

  const container = document.createElement("div");
  container.classList.add("dropdown-container");

  // Create the dropdown HTML
  container.innerHTML = `
    <label for="${id}" class="dropdown-label">${labelText}</label>
    <div class="select" id="${id}">
      <div class="selected">
        ${isMultiSelect ? 
          (selectedOption.length > 0 ? selectedOption.map(option => `<span class="selected-item">${option}</span>`).join('') : "Select options") :
          (selectedOption.length > 0 ? `<span class="selected-item">${selectedOption}</span>` : "Select an option")
        }
      </div>
      <div class="options">
        ${options.map(option => `
          <div>
            ${isMultiSelect ? 
              `<input type="checkbox" id="${id}-${option}" name="${id}" value="${option}" ${selectedOption.includes(option) ? "checked" : ""}>`
              :
              `<input type="radio" id="${id}-${option}" name="${id}" value="${option}" ${selectedOption[0] === option ? "checked" : ""}>`
            }
            <label class="option" for="${id}-${option}" role="option" aria-selected="${selectedOption.includes(option)}">${option}</label>
          </div>`).join("")}
      </div>
    </div>`;

  // Debugging log for container creation
  console.log('Created dropdown container:', container);

  const inputs = container.querySelectorAll('input');
  console.log('Attached inputs:', inputs); // Log to ensure inputs are selected

  // Handle single-select (radio button change event) with event delegation
  container.addEventListener('change', (e) => {
    console.log("Inside Event Listener");
    // Check if the event target is a radio input
    if (!isMultiSelect && e.target.type === 'radio') {
      console.log("Single-select change detected:");
      console.log("Previously selected option:", selectedOption);
      console.log("Currently selected option:", e.target.value);

      // Update selectedOption when a radio button is selected
      selectedOption = [e.target.value];

      // Update the selected text to reflect the new selection
      const selectedText = container.querySelector(".selected");
      if (selectedText) {
        selectedText.innerHTML = `<span class="selected-item">${e.target.value}</span>`;
        console.log("Updated selected value (single-select):", selectedOption);
      }

      // Update the aria-selected attribute for all options
      const labels = container.querySelectorAll('.option');
      labels.forEach(label => {
        label.setAttribute('aria-selected', label.getAttribute('for') === `${id}-${e.target.value}`);
      });
    }
  });

  // Add event listeners to all radio buttons
  inputs.forEach(input => {
    input.addEventListener('change', (e) => {
      if (e.target.type === 'radio') {
        console.log('Radio button changed:', e.target.value);
      }
    });
  });

  return container;
};

Now the weird thing is, That When I first load the page, The Dropdown in CreateEntity works;

// Create Entity 
function entityCreateModal(entityType) {
  const modal = document.getElementById('entityCreateModal');
  const title = document.getElementById('entityCreateModalTitle');
  const promptMessageContainer = modal.querySelector('.entity-create-message');
  const submitButton = modal.querySelector('.submit-button');
  promptMessageContainer.innerHTML = '';  // Clear previous content

  // Function to handle entity creation and confirmation
  const createEntity = (entityName, entityData) => {
    window.openConfirmationModal('create', () => {
      saveEntityData(entityName, entityData);
      closeModal(modal.querySelector('#modal-close-button'), '#entityCreateModal');
      location.reload();
    }, entityName);
  };


  // Call handleFileUpload for Teacher and Student
  if (entityType === 'teacher' || entityType === 'student') {
    handleFileUpload({}, '#entityCreateModal');
  }

  // Switch based on entity type
  switch (entityType) {
    case 'teacher': {
      title.textContent = "Create Teacher";
      const teacherIdField = createTextField('teacherId', '', 'Teacher ID');
      const usernameField = createTextField('username', '', 'Username');
      const emailField = createTextField('email', '', 'Email ID');
      const genderDropdown = createDropdown('gender', ['Male', 'Female', 'Other'], 'Select Gender', 'Select Gender:');
      const curriculumDropdown = createDropdown('curriculum', ['CBSE', 'IPYP', 'IGCSE', 'IBDP'], 'Select Curriculum', 'Select Curriculum:');
      const gradeDropdown = createDropdown('grade', ['PRE NURSERY', 'NURSERY', 'LKG', 'UKG', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI-SCI', 'XI-COM', 'XI-HUM', 'XII-SCI', 'XII-COM', 'XII-HUM'], 'Select Grade', 'Select Grade:');
      promptMessageContainer.innerHTML = '<p>Please enter the details for the new Teacher.</p>';
      [teacherIdField, usernameField, emailField, genderDropdown, curriculumDropdown, gradeDropdown].forEach(field => promptMessageContainer.appendChild(field));
      createEntity('teacher', {});
      break;
    }

    case 'student': {
      title.textContent = "Create Student";
      const studentIdField = createTextField('studentId', '', 'Student ID');
      const studentNameField = createTextField('studentName', '', 'Student Name');
      const curriculumDropdown = createDropdown('curriculum', ['CBSE', 'IPYP', 'IGCSE', 'IBDP'], 'Select Curriculum', 'Select Curriculum:');
      const gradeDropdown = createDropdown('grade', ['PRE NURSERY', 'NURSERY', 'LKG', 'UKG', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'], 'Select Grade', 'Select Grade:');
      const boardingDropdown = createDropdown('boarding', ['Day Boarder', 'Hostelite'], 'Select Boarding', 'Select Boarding:');
      const houseDropdown = createDropdown('house', ['Kingfisher (Blue)', 'Ibis (Red)', 'Token (Green)', 'Iora (Yellow)'], 'Select House', 'Select House:');
      const genderDropdown = createDropdown('gender', ['Male', 'Female', 'Other'], 'Select Gender', 'Select Gender:');
      const emailField = createTextField('email', '', 'Email ID');
      const bloodGroupDropdown = createDropdown('bloodGroup', ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'], 'Select Blood Group', 'Select Blood Group:');
      
      promptMessageContainer.innerHTML = '<p>Please enter the appropriate details for the new Student.</p>';
      
      // Append common fields
      [studentIdField, studentNameField, curriculumDropdown, gradeDropdown, genderDropdown, houseDropdown, boardingDropdown, bloodGroupDropdown, emailField].forEach(field => promptMessageContainer.appendChild(field));
    
      // Stream dropdown logic
      let streamDropdown = null;  // Declare the streamDropdown outside
    
      // Log the gradeDropdown element for inspection
      console.log("Grade Dropdown Element:", gradeDropdown); 
    
      gradeDropdown.addEventListener('change', () => {
        const selectedGrade = gradeDropdown.value;
    
        console.log("Inside change event listener");
        console.log("Selected Grade:", selectedGrade); 
    
        // Check for initial event or empty selection
        if (selectedGrade === '' || selectedGrade === undefined) {
          console.log('Initial event or empty selection. Ignoring.');
          return;
        }
    
        console.log('Dropdown changed. Selected value(s):', selectedGrade); 
        console.log('Grade dropdown change event triggered!');
        console.log('Grade dropdown value on change:', selectedGrade);
    
        // Proceed with the rest of your logic
        if (selectedGrade === 'XI' || selectedGrade === 'XII') {
          console.log('Grade is either XI or XII.');
    
          if (!streamDropdown) {
            console.log('Stream dropdown is being created and added to the DOM.');
            streamDropdown = createDropdown('stream', ['Science', 'Commerce', 'Humanities'], 'Select Stream', 'Select Stream:');
            promptMessageContainer.insertBefore(streamDropdown, boardingDropdown);  // Insert Stream just after Grade
          } else {
            console.log('Stream dropdown already exists in the DOM.');
          }
        } else {
          console.log('Grade is not XI or XII. Removing Stream dropdown if it exists.');
    
          if (streamDropdown) {
            console.log('Removing the Stream dropdown from the DOM.');
            promptMessageContainer.removeChild(streamDropdown);
            streamDropdown = null;
          } else {
            console.log('No Stream dropdown exists to remove.');
          }
        }
      });
    
      break;
    }
   

    case 'ticket': {
      title.textContent = "Create Ticket";
    
      const dropdown = createDropdown('affectedSystem', ['Admin Dashboard', 'Student Panel', 'Exams', 'Fees', 'Notices', 'Forget Password', 'Reset Password'],'Select a System', 'Select System:');      
      promptMessageContainer.innerHTML = '<p>Which system or component are you experiencing issues with?</p>';
      promptMessageContainer.appendChild(dropdown);
    
      submitButton.addEventListener('click', (event) => {
        event.preventDefault();
    
        const selectedSystem = dropdown.querySelector('.selected')?.textContent;
    
        if (!selectedSystem || selectedSystem === 'Select a System') {
          return alert("Please select a valid system.");
        }
    
        const [day, month, year] = new Date().toLocaleDateString('en-GB', { timeZone: 'Asia/Kolkata' }).split('/');
        const [hour, minute] = new Date().toLocaleTimeString('en-GB', { timeZone: 'Asia/Kolkata', hourCycle: 'h23' }).split(':');
        const ticketId = `T${year}${month.padStart(2, '0')}${day.padStart(2, '0')}${hour}${minute}`;
        
        const createdBy = sessionStorage.getItem("TeacherID") || "Unknown";
        const createdAt = `${day} ${new Date().toLocaleString('default', { month: 'long' })} ${year} - ${hour}:${minute}`;
        
        const priority = {
          'Admin Dashboard': 'High', 'Student Panel': 'High', 'Exams': 'High',
          'Fees': 'High', 'Notices': 'High', 'Forget Password': 'Medium',
          'Reset Password': 'Medium'
        }[selectedSystem] || 'Low';
    
        createEntity('ticket', { ticketId, createdBy, createdAt, affectedSystem: selectedSystem, status: "Open", priority });
      });
    
      break;
    }
        
    case 'system': {
      title.textContent = "Create System";
      const priorityDropdown = createDropdown('priority', ['Low', 'Medium', 'High'], 'Select Priority', 'Select Priority:');
      const systemIdField = createTextField('systemId', '', 'System ID');
      const systemNameField = createTextField('systemName', '', 'System Name');
      promptMessageContainer.innerHTML = '<p>Please enter the appropriate details for the new System.</p>';
      [systemIdField, systemNameField, priorityDropdown].forEach(field => promptMessageContainer.appendChild(field));

      // Move the listener attachment here to ensure it only runs once
      const submitHandler = (event) => {
        event.preventDefault();
        const selectedPriority = priorityDropdown.querySelector('.selected')?.textContent;

        if (!selectedPriority || selectedPriority === 'Select Priority') {
          return alert("Please select a valid priority.");
        }

        const systemId = systemIdField.querySelector("input")?.value.trim() || '';
        const systemName = systemNameField.querySelector("input")?.value.trim() || '';

        if (!systemId || !systemName) {
          return alert("Please enter both system ID and system name.");
        }

        createEntity('system', { systemId, systemName, status: 'Operational', priority: selectedPriority });
      };

      // Attach the listener after everything is ready
      submitButton.removeEventListener('click', submitHandler); // Prevent duplicate listeners
      submitButton.addEventListener('click', submitHandler);
      break;
    }

    default:
      console.error(`Unsupported entity type: ${entityType}`);
  }

  // Open modal and prevent background scroll
  modal.style.zIndex = '5';
  modal.style.display = 'flex';
  document.body.style.overflow = 'hidden';

  // Close modal
  document.getElementById('modal-close-button').addEventListener('click', () => closeModal(modal.querySelector('#modal-close-button'), '#entityCreateModal'));
}

But After I open the Edit Modal, and Try selecting an option there, It bricks both dropdowns (Edit & Create)

// Edit Modal
function openEditModal(entityType, entityData = {}) {
  const modal = document.getElementById("editModal");
  const form = document.getElementById("editModalForm");
  const closeButton = document.getElementById("editModalCloseButton");
  const saveButton = document.querySelector(".save-button");
  const deleteButton = document.querySelector(".edit-modal-delete-button");

  const titles = {
    ticket: "Edit Ticket",
    teacher: "Edit Teacher",
    student: "Edit Student",
    system: "Edit System"
  };

  const fields = {
    teacher: [
      ["Teacher ID", "teacherId"],
      ["Name", "name"],
      ["Username", "username"],
      ["Email", "email"],
      ["Gender", "gender"],
      ["Role", "role", ["Administrator", "IT Department", "Admission Department", "Accounts Department", "Discipline Committee", "Grade Coordinator", "Advisor", "Heads of Department", "Exam Department", "Class Teacher", "Subject Teacher"], true] // Multi-select for Role
    ],
    student: [
      ["Name", "name"],
      ["Student ID", "studentId"],
      ["Enrollment Status", "enrollmentStatus", ['Currently Studying', 'Transferred', 'Suspended', 'Graduated']]
    ],
    system: [
      ["System Name", "systemName"],
      ["Status", "status", ["Operational", "EP", "Down"]],
      ["Priority", "priority", ["High", "Medium", "Low"]]
    ],
    ticket: [
      ["Affected System", "affectedSystem"],
      ["Status", "status", ["Open", "In Progress", "Closed"]]
    ]
  };

  if (!fields[entityType]) {
    console.error("Unknown entity type:", entityType);
    return;
  }

  form.innerHTML = ""; // Reset form

  // Create form fields for the rest of the data
  fields[entityType].forEach(([label, dataField, options, isMultiSelect]) => {
    const fieldName = dataField;
    const labelText = label.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');  // Title case for labelText

    console.log(`Processing field: ${labelText} (dataField: ${dataField}, isMultiSelect: ${isMultiSelect})`);

    // Append either dropdown or text field based on options
    const isDropdown = options && Array.isArray(options) && options.length;
    
    if (isDropdown) {
      // For multi-select, initialize as an array
      const selectedValue = entityData[dataField] 
        ? (Array.isArray(entityData[dataField]) 
            ? entityData[dataField] 
            : [entityData[dataField]]) 
        : (isMultiSelect ? [] : "");
      
      console.log(`Creating dropdown for field: ${labelText} with options:`, options);
      form.appendChild(
        createDropdown(fieldName, options, selectedValue, labelText, isMultiSelect)
      );
    } else {
      form.appendChild(
        createTextField(fieldName, entityData[dataField] != null ? entityData[dataField] : "", labelText)
      );
    }
  });

  // Set modal title and entity ID
  document.getElementById("editModalTitle").textContent = titles[entityType];
  document.getElementById("modal-header-entity-ID").textContent = `${titles[entityType].split(" ")[1]} ID: ${entityData[`${entityType}Id`] || "N/A"}`;

  modal.style.display = "flex";
  modal.setAttribute("aria-hidden", "false");
  document.body.style.overflow = "hidden";

  closeButton.onclick = closeEditModal;
  window.onclick = (e) => e.target === modal && closeEditModal();

  saveButton.onclick = () => handleAction("save", entityType, entityData);
  deleteButton.onclick = () => handleAction("delete", entityType, entityData);

  function closeEditModal() {
    modal.style.display = "none";
    modal.setAttribute("aria-hidden", "true");
    document.body.style.overflow = "auto";
    console.log("Modal closed");
  }
}

I still can't understand whats wrong. (I'm just learning to sorry if I missed something super obvious)

This is the part I use to dynamicly create a Dropdown.

// Helper: Create Dropdown
const createDropdown = (id, options, selectedOption = [], labelText, isMultiSelect = false) => {
  console.log(`Creating dropdown for ${labelText} with ID: ${id}`);
  console.log(`Initial selectedOption:`, selectedOption);
  console.log(`Options provided:`, options);
  console.log(`Multi-select: ${isMultiSelect}`);

  const container = document.createElement("div");
  container.classList.add("dropdown-container");

  // Create the dropdown HTML
  container.innerHTML = `
    <label for="${id}" class="dropdown-label">${labelText}</label>
    <div class="select" id="${id}">
      <div class="selected">
        ${isMultiSelect ? 
          (selectedOption.length > 0 ? selectedOption.map(option => `<span class="selected-item">${option}</span>`).join('') : "Select options") :
          (selectedOption.length > 0 ? `<span class="selected-item">${selectedOption}</span>` : "Select an option")
        }
      </div>
      <div class="options">
        ${options.map(option => `
          <div>
            ${isMultiSelect ? 
              `<input type="checkbox" id="${id}-${option}" name="${id}" value="${option}" ${selectedOption.includes(option) ? "checked" : ""}>`
              :
              `<input type="radio" id="${id}-${option}" name="${id}" value="${option}" ${selectedOption[0] === option ? "checked" : ""}>`
            }
            <label class="option" for="${id}-${option}" role="option" aria-selected="${selectedOption.includes(option)}">${option}</label>
          </div>`).join("")}
      </div>
    </div>`;

  // Debugging log for container creation
  console.log('Created dropdown container:', container);

  const inputs = container.querySelectorAll('input');
  console.log('Attached inputs:', inputs); // Log to ensure inputs are selected

  // Handle single-select (radio button change event) with event delegation
  container.addEventListener('change', (e) => {
    console.log("Inside Event Listener");
    // Check if the event target is a radio input
    if (!isMultiSelect && e.target.type === 'radio') {
      console.log("Single-select change detected:");
      console.log("Previously selected option:", selectedOption);
      console.log("Currently selected option:", e.target.value);

      // Update selectedOption when a radio button is selected
      selectedOption = [e.target.value];

      // Update the selected text to reflect the new selection
      const selectedText = container.querySelector(".selected");
      if (selectedText) {
        selectedText.innerHTML = `<span class="selected-item">${e.target.value}</span>`;
        console.log("Updated selected value (single-select):", selectedOption);
      }

      // Update the aria-selected attribute for all options
      const labels = container.querySelectorAll('.option');
      labels.forEach(label => {
        label.setAttribute('aria-selected', label.getAttribute('for') === `${id}-${e.target.value}`);
      });
    }
  });

  // Add event listeners to all radio buttons
  inputs.forEach(input => {
    input.addEventListener('change', (e) => {
      if (e.target.type === 'radio') {
        console.log('Radio button changed:', e.target.value);
      }
    });
  });

  return container;
};

Now the weird thing is, That When I first load the page, The Dropdown in CreateEntity works;

// Create Entity 
function entityCreateModal(entityType) {
  const modal = document.getElementById('entityCreateModal');
  const title = document.getElementById('entityCreateModalTitle');
  const promptMessageContainer = modal.querySelector('.entity-create-message');
  const submitButton = modal.querySelector('.submit-button');
  promptMessageContainer.innerHTML = '';  // Clear previous content

  // Function to handle entity creation and confirmation
  const createEntity = (entityName, entityData) => {
    window.openConfirmationModal('create', () => {
      saveEntityData(entityName, entityData);
      closeModal(modal.querySelector('#modal-close-button'), '#entityCreateModal');
      location.reload();
    }, entityName);
  };


  // Call handleFileUpload for Teacher and Student
  if (entityType === 'teacher' || entityType === 'student') {
    handleFileUpload({}, '#entityCreateModal');
  }

  // Switch based on entity type
  switch (entityType) {
    case 'teacher': {
      title.textContent = "Create Teacher";
      const teacherIdField = createTextField('teacherId', '', 'Teacher ID');
      const usernameField = createTextField('username', '', 'Username');
      const emailField = createTextField('email', '', 'Email ID');
      const genderDropdown = createDropdown('gender', ['Male', 'Female', 'Other'], 'Select Gender', 'Select Gender:');
      const curriculumDropdown = createDropdown('curriculum', ['CBSE', 'IPYP', 'IGCSE', 'IBDP'], 'Select Curriculum', 'Select Curriculum:');
      const gradeDropdown = createDropdown('grade', ['PRE NURSERY', 'NURSERY', 'LKG', 'UKG', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI-SCI', 'XI-COM', 'XI-HUM', 'XII-SCI', 'XII-COM', 'XII-HUM'], 'Select Grade', 'Select Grade:');
      promptMessageContainer.innerHTML = '<p>Please enter the details for the new Teacher.</p>';
      [teacherIdField, usernameField, emailField, genderDropdown, curriculumDropdown, gradeDropdown].forEach(field => promptMessageContainer.appendChild(field));
      createEntity('teacher', {});
      break;
    }

    case 'student': {
      title.textContent = "Create Student";
      const studentIdField = createTextField('studentId', '', 'Student ID');
      const studentNameField = createTextField('studentName', '', 'Student Name');
      const curriculumDropdown = createDropdown('curriculum', ['CBSE', 'IPYP', 'IGCSE', 'IBDP'], 'Select Curriculum', 'Select Curriculum:');
      const gradeDropdown = createDropdown('grade', ['PRE NURSERY', 'NURSERY', 'LKG', 'UKG', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'], 'Select Grade', 'Select Grade:');
      const boardingDropdown = createDropdown('boarding', ['Day Boarder', 'Hostelite'], 'Select Boarding', 'Select Boarding:');
      const houseDropdown = createDropdown('house', ['Kingfisher (Blue)', 'Ibis (Red)', 'Token (Green)', 'Iora (Yellow)'], 'Select House', 'Select House:');
      const genderDropdown = createDropdown('gender', ['Male', 'Female', 'Other'], 'Select Gender', 'Select Gender:');
      const emailField = createTextField('email', '', 'Email ID');
      const bloodGroupDropdown = createDropdown('bloodGroup', ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'], 'Select Blood Group', 'Select Blood Group:');
      
      promptMessageContainer.innerHTML = '<p>Please enter the appropriate details for the new Student.</p>';
      
      // Append common fields
      [studentIdField, studentNameField, curriculumDropdown, gradeDropdown, genderDropdown, houseDropdown, boardingDropdown, bloodGroupDropdown, emailField].forEach(field => promptMessageContainer.appendChild(field));
    
      // Stream dropdown logic
      let streamDropdown = null;  // Declare the streamDropdown outside
    
      // Log the gradeDropdown element for inspection
      console.log("Grade Dropdown Element:", gradeDropdown); 
    
      gradeDropdown.addEventListener('change', () => {
        const selectedGrade = gradeDropdown.value;
    
        console.log("Inside change event listener");
        console.log("Selected Grade:", selectedGrade); 
    
        // Check for initial event or empty selection
        if (selectedGrade === '' || selectedGrade === undefined) {
          console.log('Initial event or empty selection. Ignoring.');
          return;
        }
    
        console.log('Dropdown changed. Selected value(s):', selectedGrade); 
        console.log('Grade dropdown change event triggered!');
        console.log('Grade dropdown value on change:', selectedGrade);
    
        // Proceed with the rest of your logic
        if (selectedGrade === 'XI' || selectedGrade === 'XII') {
          console.log('Grade is either XI or XII.');
    
          if (!streamDropdown) {
            console.log('Stream dropdown is being created and added to the DOM.');
            streamDropdown = createDropdown('stream', ['Science', 'Commerce', 'Humanities'], 'Select Stream', 'Select Stream:');
            promptMessageContainer.insertBefore(streamDropdown, boardingDropdown);  // Insert Stream just after Grade
          } else {
            console.log('Stream dropdown already exists in the DOM.');
          }
        } else {
          console.log('Grade is not XI or XII. Removing Stream dropdown if it exists.');
    
          if (streamDropdown) {
            console.log('Removing the Stream dropdown from the DOM.');
            promptMessageContainer.removeChild(streamDropdown);
            streamDropdown = null;
          } else {
            console.log('No Stream dropdown exists to remove.');
          }
        }
      });
    
      break;
    }
   

    case 'ticket': {
      title.textContent = "Create Ticket";
    
      const dropdown = createDropdown('affectedSystem', ['Admin Dashboard', 'Student Panel', 'Exams', 'Fees', 'Notices', 'Forget Password', 'Reset Password'],'Select a System', 'Select System:');      
      promptMessageContainer.innerHTML = '<p>Which system or component are you experiencing issues with?</p>';
      promptMessageContainer.appendChild(dropdown);
    
      submitButton.addEventListener('click', (event) => {
        event.preventDefault();
    
        const selectedSystem = dropdown.querySelector('.selected')?.textContent;
    
        if (!selectedSystem || selectedSystem === 'Select a System') {
          return alert("Please select a valid system.");
        }
    
        const [day, month, year] = new Date().toLocaleDateString('en-GB', { timeZone: 'Asia/Kolkata' }).split('/');
        const [hour, minute] = new Date().toLocaleTimeString('en-GB', { timeZone: 'Asia/Kolkata', hourCycle: 'h23' }).split(':');
        const ticketId = `T${year}${month.padStart(2, '0')}${day.padStart(2, '0')}${hour}${minute}`;
        
        const createdBy = sessionStorage.getItem("TeacherID") || "Unknown";
        const createdAt = `${day} ${new Date().toLocaleString('default', { month: 'long' })} ${year} - ${hour}:${minute}`;
        
        const priority = {
          'Admin Dashboard': 'High', 'Student Panel': 'High', 'Exams': 'High',
          'Fees': 'High', 'Notices': 'High', 'Forget Password': 'Medium',
          'Reset Password': 'Medium'
        }[selectedSystem] || 'Low';
    
        createEntity('ticket', { ticketId, createdBy, createdAt, affectedSystem: selectedSystem, status: "Open", priority });
      });
    
      break;
    }
        
    case 'system': {
      title.textContent = "Create System";
      const priorityDropdown = createDropdown('priority', ['Low', 'Medium', 'High'], 'Select Priority', 'Select Priority:');
      const systemIdField = createTextField('systemId', '', 'System ID');
      const systemNameField = createTextField('systemName', '', 'System Name');
      promptMessageContainer.innerHTML = '<p>Please enter the appropriate details for the new System.</p>';
      [systemIdField, systemNameField, priorityDropdown].forEach(field => promptMessageContainer.appendChild(field));

      // Move the listener attachment here to ensure it only runs once
      const submitHandler = (event) => {
        event.preventDefault();
        const selectedPriority = priorityDropdown.querySelector('.selected')?.textContent;

        if (!selectedPriority || selectedPriority === 'Select Priority') {
          return alert("Please select a valid priority.");
        }

        const systemId = systemIdField.querySelector("input")?.value.trim() || '';
        const systemName = systemNameField.querySelector("input")?.value.trim() || '';

        if (!systemId || !systemName) {
          return alert("Please enter both system ID and system name.");
        }

        createEntity('system', { systemId, systemName, status: 'Operational', priority: selectedPriority });
      };

      // Attach the listener after everything is ready
      submitButton.removeEventListener('click', submitHandler); // Prevent duplicate listeners
      submitButton.addEventListener('click', submitHandler);
      break;
    }

    default:
      console.error(`Unsupported entity type: ${entityType}`);
  }

  // Open modal and prevent background scroll
  modal.style.zIndex = '5';
  modal.style.display = 'flex';
  document.body.style.overflow = 'hidden';

  // Close modal
  document.getElementById('modal-close-button').addEventListener('click', () => closeModal(modal.querySelector('#modal-close-button'), '#entityCreateModal'));
}

But After I open the Edit Modal, and Try selecting an option there, It bricks both dropdowns (Edit & Create)

// Edit Modal
function openEditModal(entityType, entityData = {}) {
  const modal = document.getElementById("editModal");
  const form = document.getElementById("editModalForm");
  const closeButton = document.getElementById("editModalCloseButton");
  const saveButton = document.querySelector(".save-button");
  const deleteButton = document.querySelector(".edit-modal-delete-button");

  const titles = {
    ticket: "Edit Ticket",
    teacher: "Edit Teacher",
    student: "Edit Student",
    system: "Edit System"
  };

  const fields = {
    teacher: [
      ["Teacher ID", "teacherId"],
      ["Name", "name"],
      ["Username", "username"],
      ["Email", "email"],
      ["Gender", "gender"],
      ["Role", "role", ["Administrator", "IT Department", "Admission Department", "Accounts Department", "Discipline Committee", "Grade Coordinator", "Advisor", "Heads of Department", "Exam Department", "Class Teacher", "Subject Teacher"], true] // Multi-select for Role
    ],
    student: [
      ["Name", "name"],
      ["Student ID", "studentId"],
      ["Enrollment Status", "enrollmentStatus", ['Currently Studying', 'Transferred', 'Suspended', 'Graduated']]
    ],
    system: [
      ["System Name", "systemName"],
      ["Status", "status", ["Operational", "EP", "Down"]],
      ["Priority", "priority", ["High", "Medium", "Low"]]
    ],
    ticket: [
      ["Affected System", "affectedSystem"],
      ["Status", "status", ["Open", "In Progress", "Closed"]]
    ]
  };

  if (!fields[entityType]) {
    console.error("Unknown entity type:", entityType);
    return;
  }

  form.innerHTML = ""; // Reset form

  // Create form fields for the rest of the data
  fields[entityType].forEach(([label, dataField, options, isMultiSelect]) => {
    const fieldName = dataField;
    const labelText = label.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');  // Title case for labelText

    console.log(`Processing field: ${labelText} (dataField: ${dataField}, isMultiSelect: ${isMultiSelect})`);

    // Append either dropdown or text field based on options
    const isDropdown = options && Array.isArray(options) && options.length;
    
    if (isDropdown) {
      // For multi-select, initialize as an array
      const selectedValue = entityData[dataField] 
        ? (Array.isArray(entityData[dataField]) 
            ? entityData[dataField] 
            : [entityData[dataField]]) 
        : (isMultiSelect ? [] : "");
      
      console.log(`Creating dropdown for field: ${labelText} with options:`, options);
      form.appendChild(
        createDropdown(fieldName, options, selectedValue, labelText, isMultiSelect)
      );
    } else {
      form.appendChild(
        createTextField(fieldName, entityData[dataField] != null ? entityData[dataField] : "", labelText)
      );
    }
  });

  // Set modal title and entity ID
  document.getElementById("editModalTitle").textContent = titles[entityType];
  document.getElementById("modal-header-entity-ID").textContent = `${titles[entityType].split(" ")[1]} ID: ${entityData[`${entityType}Id`] || "N/A"}`;

  modal.style.display = "flex";
  modal.setAttribute("aria-hidden", "false");
  document.body.style.overflow = "hidden";

  closeButton.onclick = closeEditModal;
  window.onclick = (e) => e.target === modal && closeEditModal();

  saveButton.onclick = () => handleAction("save", entityType, entityData);
  deleteButton.onclick = () => handleAction("delete", entityType, entityData);

  function closeEditModal() {
    modal.style.display = "none";
    modal.setAttribute("aria-hidden", "true");
    document.body.style.overflow = "auto";
    console.log("Modal closed");
  }
}

I still can't understand whats wrong. (I'm just learning to sorry if I missed something super obvious)

• javascript
• drop-down-menu
• addeventlistener

Share Improve this question Follow asked Jan 25 at 18:14 SkySky 122 bronze badges New contributor Sky is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1

• This is a good opportunity for you to start familiarizing yourself with using a debugger. When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the tour and read How to Ask and its linked resources – Mister Jojo Commented Jan 25 at 21:26

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I second the comment made by Mister Jojo in relation to asking slightly more specific questions, I'd also add that including a minimal reproducible example will help get answers quicker!

Having looked through the code you have provided, I note that you have written:

window.onclick = (e) => e.target === modal && closeEditModal();

This code appears to prevent the onclick event triggering on your input (checkboxes and radios). Remove this and it should allow you to perform these events.

本文标签： javascriptGetting problems in selecting options in a DropdownStack Overflow