创建并调用辅助/可复用函数：简化前端重复代码

Hey there! Let's get your code refactored and the required features implemented properly. You mentioned you already started splitting out a helper function to find the target item—great start! Let's build on that and add a second helper to handle showing/hiding the expiration date input, then tie everything together cleanly.

We'll structure this into two reusable helper functions plus the core logic to fetch data and wire up interactions:

1. A function to locate the selected option object from your backend array using its value
2. A function to toggle the visibility (and state) of the expiration date input based on the selected item's boolean property
   Then we'll fetch data from your backend, populate the <select> element, and connect the change event to use our helpers.

Step 1: Define the Reusable Helper Functions #

First, let's formalize the helper you started, plus add the toggle function for the input:

// Helper 1: Find the matching option object from the array by its value
function findSelectedOption(optionsArray, selectedValue) {
  return optionsArray.find(option => option.value === selectedValue);
}

// Helper 2: Toggle visibility and state of the expiration date input
function toggleExpirationDateInput(shouldShow) {
  const expirationInput = document.getElementById('expiration-date');
  if (!expirationInput) return;

  expirationInput.style.display = shouldShow ? 'block' : 'none';
  expirationInput.disabled = !shouldShow;
  
  // Optional: Clear the input when hiding to avoid stale data
  if (!shouldShow) {
    expirationInput.value = '';
  }
}

Step 2: Fetch Backend Data & Populate the Select Element #

Next, let's write code to pull your array from the backend and build the select options:

// Fetch data from backend and populate the select dropdown
async function populateSelectFromBackend() {
  try {
    const response = await fetch('/api/your-endpoint'); // Replace with your actual backend URL
    const optionsData = await response.json(); // This should be your array of option objects

    const selectElement = document.getElementById('your-select-id'); // Replace with your select's ID
    if (!selectElement) return;

    // Cache the options data on the select element for later use (avoids refetching)
    selectElement.optionsData = optionsData;

    // Clear existing options and add a default placeholder
    selectElement.innerHTML = '';
    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = 'Select an option';
    selectElement.appendChild(defaultOption);

    // Add options from the backend data
    optionsData.forEach(option => {
      const optionElement = document.createElement('option');
      optionElement.value = option.value; // Replace with your option's value property
      optionElement.textContent = option.label; // Replace with your option's display text property
      selectElement.appendChild(optionElement);
    });

    // Set initial state: hide the expiration input
    toggleExpirationDateInput(false);
  } catch (error) {
    console.error('Error fetching options:', error);
  }
}

Step 3: Wire Up the Select Change Event #

Now let's connect the select's change event to our helpers to update the input visibility dynamically:

// Initialize everything when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
  // First, populate the select with backend data
  populateSelectFromBackend();

  // Get the select element
  const selectElement = document.getElementById('your-select-id');

  // Add change event listener
  selectElement.addEventListener('change', (e) => {
    const selectedValue = e.target.value;

    // If no option is selected, hide the input
    if (!selectedValue) {
      toggleExpirationDateInput(false);
      return;
    }

    // Use our helper to find the selected option object
    const selectedOption = findSelectedOption(selectElement.optionsData, selectedValue);
    
    // Toggle the input based on the option's boolean property (replace `hasExpiration` with your actual property name)
    if (selectedOption) {
      toggleExpirationDateInput(selectedOption.hasExpiration);
    }
  });
});

Full Working Example #

Here's the complete code with placeholder values replaced (adjust IDs, endpoint, and property names to match your actual setup):

<!-- HTML -->
<select id="product-type"></select>
<input type="date" id="expiration-date" style="display: none;">

<script>
// Helper Functions
function findSelectedOption(optionsArray, selectedValue) {
  return optionsArray.find(option => option.value === selectedValue);
}

function toggleExpirationDateInput(shouldShow) {
  const expirationInput = document.getElementById('expiration-date');
  if (!expirationInput) return;

  expirationInput.style.display = shouldShow ? 'block' : 'none';
  expirationInput.disabled = !shouldShow;
  if (!shouldShow) expirationInput.value = '';
}

// Populate Select from Backend
async function populateSelectFromBackend() {
  try {
    // Example backend response: [{value: "1", label: "Perishable", hasExpiration: true}, {value: "2", label: "Non-Perishable", hasExpiration: false}]
    const response = await fetch('/api/product-types');
    const optionsData = await response.json();

    const selectElement = document.getElementById('product-type');
    if (!selectElement) return;

    selectElement.optionsData = optionsData;
    selectElement.innerHTML = '';

    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = 'Select a product type';
    selectElement.appendChild(defaultOption);

    optionsData.forEach(option => {
      const optionElement = document.createElement('option');
      optionElement.value = option.value;
      optionElement.textContent = option.label;
      selectElement.appendChild(optionElement);
    });

    toggleExpirationDateInput(false);
  } catch (error) {
    console.error('Error loading product types:', error);
  }
}

// Initialize on DOM Load
document.addEventListener('DOMContentLoaded', () => {
  populateSelectFromBackend();

  const selectElement = document.getElementById('product-type');
  selectElement.addEventListener('change', (e) => {
    const selectedValue = e.target.value;
    if (!selectedValue) {
      toggleExpirationDateInput(false);
      return;
    }

    const selectedOption = findSelectedOption(selectElement.optionsData, selectedValue);
    if (selectedOption) {
      toggleExpirationDateInput(selectedOption.hasExpiration);
    }
  });
});
</script>

Key Advantages of This Approach #

• Reusability: Both helper functions can be repurposed elsewhere in your codebase (e.g., toggleExpirationDateInput could work for other visibility toggles)
• Maintainability: Separating concerns means each function does one specific job, making debugging and updates easier
• Efficiency: Caching the backend data on the select element avoids unnecessary API calls when the user changes selections

内容的提问来源于stack exchange，提问作者Ahmed ALgallad